2015年3月23日

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

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

Wayne Fu 0 A+

(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 按鈕語法:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

5 則留言:

  1. 你好!我把jquery升到1.8.3,浮动按钮出现了,但是不能go top,是因为本版没有达到1.9.0,吗?

    回覆刪除
  2. http://jsfiddle.net/zaheerahmed/qjunggbj/ 用这个网站的办法,放了1.9.0版本,按钮可以工作了.

    回覆刪除
    回覆
    1. 呵呵,遇到问题,一边学一边解决,感觉有收获!不过主要要谢谢你的分享,才让我这样一点没有基础的能够把博客修改一下.达到自己觉得满意的效果!再次谢谢!

      刪除
  3. 最近才發現這功能不能用XD~按照你的步驟修好了~感謝XD!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP