(Pic from: shimivn.blogspot.com)「回到頂端」按鈕是很常見的設計，且 code 不難寫。那麼特地撰寫本文的目的為何呢？其實主要是拜讀了 +Bin Ye的「改善 Google Blogger 返回頂部按鈕的使用體驗」覺得很有道理，因此雖然未使用這個按鈕(已經有「置頂導覽列選單」了)，不過這個友善的使用者體驗設計，值得把他做出來，讓有需要的站長自取，因為本站的作品基本上也是朝使用者體驗的方向在前進。
一、符合使用者體驗的設計要點
以下所提的各種效果，可先請參考這個 DEMO 網頁對照：
1. 按鈕的位置
「回到頂端」按鈕很常見的位置放在頁面的右下角，不過根據 Bin Ye 原文及留言，使用者視線的焦點大致落在螢幕中央的水平線(也就是 1/2 處)，而滑鼠指標大致會落在螢幕中央約 2/3 的區域。
經觀察自己實際操作滑鼠的模式，的確不自覺會將鼠標落在畫面中央水平線稍微下面一點之處，那麼「回到頂端」按鈕如果放在螢幕 1/2 ～ 2/3 這個高度區間，可減少滑鼠移動的距離，對於使用者而言將是最方便的操作。
2. 透明度
這個按鈕可能會遮住一些文字，因此有必要加入透明度的設計，當滑鼠經過按鈕時再取消透明。
3. 出現時機
畫面尚未捲動時沒必要回到頂端，因此用 jqeury 監測捲動事件，當畫面開始捲動後才出現按鈕。
4. 滑動效果
直接跳到頂端稍嫌粗魯，用 jquery 內建的動畫效果，可以達到簡單的滑動效果。
二、安裝程式碼
1. 以 Blogger 的操作為例，到後台「範本」→「編輯 HTML」，如果範本裡已經安裝過 jqeury 的話(需至少 1.7 以上的版本)，就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串)；如果沒安裝過 jquery，請搜尋
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>2. 接著請搜尋
3. 如果覺得預設效果就很好了，那麼請直接存檔即可；想要修改參數的話，請依以上程式碼行號參考以下說明：
G：想使用自訂圖案，請置換藍字圖片網址。
H：紅字 "1/2" 代表按鈕無論螢幕在任何情況、解析度下，都會出現在約 1/2 的高度，建議填入 1/2 ～ 2/3 之間的數值。
I：按鈕距離螢幕右邊界的 px 值
J：按鈕的透明度可填入 0 ～ 1 的數字，0 代表完全透明，1 代表不透明。
K：可自訂捲動的速度，綠字 500 代表以 0.5 秒的速度捲到頂端，若填入 1000 代表 1 秒。
E：title 裡面的中文字串可改為自訂的提醒文字
三、小結
如果對 js 熟悉的話，本文的程式碼還可以有非常多的應用，例如自行修改加入其他按鈕，可快速跳轉到留言區、自訂錨點的功能，或加入幾個常用的社交分享按鈕等等。由於 WFU BLOG 尚未考慮使用這些功能，因此要請自行研究了。