(Pic from: keytothecity.co.uk)之前做過兩個「回到頂端」按鈕的版本，分別是「Go Top 按鈕符合使用者體驗的友善設計」、「Go Top 按鈕放在浮動導覽列」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。
以下為修改的筆記，如果熟悉 CSS / jQuery 的話，可以改為符合自己風格的效果。
一、特效展示
這個版本的特點主要有以下幾個：
1. 放大縮小
常見的放大縮小作法為，設定兩張圖片(一大一小)，滑鼠經過時切換為另一張圖片。
這個版本只使用一張圖片，用 CSS 控制尺寸，並在放大縮小時使用動畫效果，可以看到由小變大、及由大變小的平滑轉變過程。
2. 透明度
一開始設定半透明，避免按鈕太過鮮眼。滑鼠經過時再恢復為不透明。
3. 捲動動畫
一般的捲動效果為直上直下，當捲動速度很快時，這樣的效果比較突兀一些。
借用 jQuery 的 easing 效果 (有 32 種)，比較平順的捲動效果為，最後捲到上方時，刻意放慢速度、類似火車進站時的減速效果，可以增加捲動的質感。
以上這些特點，可先看這個網頁的效果：
二、準備動作
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>
/* Go Top 按鈕 */
#goTop {
position: fixed;
bottom: 5px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 5px; /* 與右方的距離 */
width: 40px; /* 按鈕原始寬度 */
height: 40px; /* 按鈕原始高度 */
opacity: 0.4; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s; /* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
width: 80px; /* 按鈕寬度 */
height: 80px; /* 按鈕高度 */
}
</style>第一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。
其餘 CSS 參數，請按綠色字串的說明來修改即可。
三、安裝按鈕
接著請搜尋
<!-- Go Top 按鈕+動畫 start -->
<img id="goTop" src="http://4.bp.blogspot.com/-28LaVG5DtBo/VQ_XOQosQQI/AAAAAAAALY4/T4uKguB0Ttk/s100/up-button.png" title="Back to Top"/>
<script>
$.extend($.easing, {
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}
});
$("#goTop").click(function(){
$("html, body").animate({scrollTop: 0}, 1000, "easeOutExpo");
});
</script>
<!-- Go Top 按鈕+動畫 end, Designed by WFU BLOG -->- 藍色字串可改為自訂的按鈕圖示網址。
- 紅色字串為捲動過程花費的時間，1000 代表 1 秒鐘。
- 綠色字串為捲動效果的程式碼，請見下一節的說明。
四、easing 效果
jQuery 預設的捲動效果只有兩種：
- linear：直線移動
- swing：稍微晃動
其實也不能說是 jQuery 有這兩種捲動效果，該說這是物體移動路徑的演算法。jQuery 可經由擴充，來增加物體其他的移動方式，詳細說明請參考這個網頁，附有圖示說明：「jQuery Easing 使用方法及其圖解」。
瞭解各種路徑後，再回到「三、安裝按鈕」的所有綠色程式碼，我選擇擴充 "easeOutExpo" 這個效果，也就是捲動最後呈現「緩慢停止」的運動方式。
如果想嘗試其他的物體運動方式，可將綠色部分的程式碼，改為其他 31 種，即可測試不同的捲動效果。
更多 Go Top 按鈕語法：