[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

(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，請搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

2. 接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：



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 尚未考慮使用這些功能，因此要請自行研究了。

更多 Go Top 按鈕語法：