目前茶話匯首頁顯示的最新文章數量在10篇左右，大部分文章有上千文字並且帶有配圖，在頁面上下拖動時很不方便，因此實現一個懸浮在頁面並支援直達該頁面“頂部”、“底部”、“評論框”的入口，便可極大的提高頁面的閱讀友好型，甚至可以提高讀者的評論參與度，效果如下圖所示（上下兩個箭頭可分別直達頁面頂部或底部、在文章頁面點選該按鈕的中部則可直達文章評論框）：

程式碼實現方式如下：
1. 需要評論的頁面（文章頁、留言本等），這裡以文章頁single.php為例，開啟該檔案，找到程式碼<!–?php get_header(); ?–>，在該程式碼後面追加以下程式碼：

<div id="roll"><div title="回到頂部" id="roll_top"></div><div title="檢視評論" id="ct"></div><div title="轉到底部" id="fall"></div></div>

2. 不需要評論的頁面（首頁、文章歸檔頁、友情連結頁等），這裡以首頁index.php為例，開啟該檔案，找到程式碼<!–?php get_header(); ?–>，在該程式碼後面追加以下程式碼：

<div id="roll"><div title="回到頂部" id="roll_top"></div><div title="轉到底部" id="fall"></div></div>

3. 將懸浮按鈕圖示roll.gif放到你當前主題的image目錄下；

4. 將懸浮按鈕的CSS程式碼和JS程式碼分別寫入你當前所用主題所載入的CSS和JS檔案

CSS程式碼：

[code lang=”css”]/** 翻屏 **/
#roll_top, #fall {
cursor: pointer;
height: 50px;
position: relative;
width: 15px;
}
#ct {
cursor: pointer;
height: 50px;
position: relative;
width: 15px;
}
#roll_top {
background: url("images/roll.gif") no-repeat scroll 0 0 transparent;
}
#fall {
background: url("images/roll.gif") no-repeat scroll 0 -100px transparent;
}
#ct {
background: url("images/roll.gif") no-repeat scroll 0 -50px transparent;
}
#roll {
display:block;
width:15px;
margin-right:-224px;
position:fixed;
right:50%;
top:52%;
_margin-right:-224px;
_position:absolute;
_margin-top:283px;
}[/code]

JS程式碼：

[code lang=”js”]
// 滾屏
jQuery(document).ready(function(){
jQuery(‘#roll_top’).click(function(){jQuery(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
jQuery(‘#ct’).click(function(){jQuery(‘html,body’).animate({scrollTop:jQuery(‘#comments’).offset().top}, 800);});
jQuery(‘#fall’).click(function(){jQuery(‘html,body’).animate({scrollTop:jQuery(‘#footer’).offset().top}, 800);});
});
[/code]