2015年3月23日

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

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="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 按鈕語法:

6 則留言:

  1. 回覆
    1. 那應該來多寫一些 CSS 的主題 :)

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

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

    回覆刪除
    回覆
    1. 我相信您解決問題、搜尋資訊的能力不錯 ^^
      解決 jquery conflict 的問題需要一點功力~~有時某些外掛的語法,用 1.8.2 可執行,但 2.0.0 會失效,滿麻煩的...

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

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。