[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

(Pic from: keytothecity.co.uk)之前做過兩個「回到頂端」按鈕的版本，分別是「Go Top 按鈕符合使用者體驗的友善設計」、「Go Top 按鈕放在浮動導覽列」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。

以下為修改的筆記，如果熟悉 CSS / jQuery 的話，可以改為符合自己風格的效果。

一、特效展示

這個版本的特點主要有以下幾個：

1. 放大縮小

常見的放大縮小作法為，設定兩張圖片(一大一小)，滑鼠經過時切換為另一張圖片。

這個版本只使用一張圖片，用 CSS 控制尺寸，並在放大縮小時使用動畫效果，可以看到由小變大、及由大變小的平滑轉變過程。


2. 透明度

一開始設定半透明，避免按鈕太過鮮眼。滑鼠經過時再恢復為不透明。


3. 捲動動畫

一般的捲動效果為直上直下，當捲動速度很快時，這樣的效果比較突兀一些。

借用 jQuery 的 easing 效果 (有 32 種)，比較平順的捲動效果為，最後捲到上方時，刻意放慢速度、類似火車進站時的減速效果，可以增加捲動的質感。


以上這些特點，可先看這個網頁的效果：

點此看範例網頁

二、準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<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 參數，請按綠色字串的說明來修改即可。

三、安裝按鈕

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

<!-- Go Top 按鈕+動畫 start -->
<img id="goTop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuf4zFMaQrAd4_8rOn0OcFt2OSZTRQ9hRxRu2RgQ3ahuod-kCN7E3DgGwJQMycnsab_W4xgEzvoRB_YvJDn_Qq0RH2_yTnnhufjXMwKXapgrWKSoa9dhfKAwpwoHAeIx-nGyNNerR-AE5p/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 按鈕語法：