最近有一個瀏覽網頁的習慣，當頁面捲到下方時，會搜索頁面中的「回到頂端」按鈕。其實越來越多網站會加入這個功能，例如T客邦...等大型的資訊網站，我常看的新聞網站像獨立評論@天下...等。這些網站的瀏覽經驗讓我養成了按「回到頂端」的習慣，也許也有人發現了自己不小心養成了這個習慣。
圖.1 本網站的「回到頂端」按鈕
有時候看到別的網站有一些小工具，我也會想要加入自己的網站中玩玩看，針對這個「回到頂端按鈕」，這裡要談的是一個重點-你的網站是否真的需要加入這個小工具。以我的網站來說，首要目標是希望讀者能夠多看看這個網站的文章，數據上就是停留時間長、翻閱頁數多。所以為了這個目標要盡量讓讀者能夠快速地接觸到文章連結。那這個思維要怎麼扯到「回到頂端」去呢？
現在請稍微瞄一下頁面右邊的熱門文章還有文章標籤，然後再回到原文來。如果是對正在閱讀的文章很有興趣的讀者，八成會留在原本文章繼續閱讀。反之，對原文沒興趣且被熱門文章吸引過去的讀者就會過去點擊，於是離開了現在在閱讀的文章。可是還有另外一種情況，那就是對原文跟熱門文章都頗有興趣的人，我估計一般人是會先把正在閱讀的文章讀完，再考慮下一步驟要去哪。而當這種讀者讀完原文之後，理論上都會在整個頁面的下端了，當他想要回頭看看剛剛吸引他的熱門文章，點一下「回到頂端按鈕」可是比用滑鼠滾輪滾半天還有效率。
用同樣的思維，因為目前行動版的頁面頂端並沒有什麼文章可以讓讀者點閱，所以暫時不加入這個小工具。接下來就來看程式碼吧，程式碼總共分4個部分，分別是載入 jQuery 函式庫、HTML 程式碼、CSS 程式碼和 jQuery 程式碼。
一、載入 jQuery 函式庫
在範本裡的"<head></head>"標籤中任意位置加入以下程式碼，如此我們的網站就可以使用 jQuery 的功能了。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
二、加入 HTML 程式碼
在範本中搜尋<body>，找到之後在它的下面加入以下程式碼。因為不想在行動版顯示這個按鈕，所以加入了頭尾的判斷式。
<b:if cond='data:blog.isMobile'> <!-- gotop在mobile不顯示的html語法 -->
<b:else/>
<div id='gotop' ><center>︿</center>Top</div> <!-- gotop的html語法 -->
<b:else/>
<div id='gotop' ><center>︿</center>Top</div> <!-- gotop的html語法 -->
</b:if>
三、加入 CSS 程式碼
在範本裡的"<head></head>"標籤之間加入以下程式碼。
<style type='text/css'>
<!--
#gotop { /* gotop的css語法 */
z-index: 1;
display: none;
position: fixed;
right: 90px;
bottom: 25px;
padding: 10px 15px;
font-size: 15px;
background: #777;
color: white;
cursor: pointer;
}
-->
</style>
<!--
#gotop { /* gotop的css語法 */
z-index: 1;
display: none;
position: fixed;
right: 90px;
bottom: 25px;
padding: 10px 15px;
font-size: 15px;
background: #777;
color: white;
cursor: pointer;
}
-->
</style>
想要調顯示的位置可以調 right 和 bottom 的值，right 是指離頁面右邊邊緣多少距離；同理，bottom 是指離底部多少距離。若是對 CSS 熟悉的話還可以進一步調整版型。
四、加入 jQuery 程式碼
在上面第一步的程式碼下方加入 jQuery 程式碼，這個功能是用來讓按鈕出現以及點下按鈕能夠回到頂端。藍字的 430 可以依照自己需求調整，指的是距離頁面上面邊緣多少距離。想要按鈕在頁面滾到越下方才出現數值就越大。
<script type="text/javascript">$(function(){ $("#gotop").click(function(){ jQuery("html,body").animate({ scrollTop:0 },700); }); $(window).scroll(function() { if ( $(this).scrollTop() > 430){ $('#gotop').fadeIn("fast"); } else { $('#gotop').stop().fadeOut("fast"); } });});</script>放完程式碼趕緊按儲存範本，到自己的網站去看看有沒有出現按鈕吧。
