回到頁首(Back to Top)按鈕 | RWD網頁設計

11.9.16

回到頁首(Back to Top)按鈕教學
現在多數人都使用手機上網了,有時看長篇內容要不停捲動螢幕不太方便。在網頁下方加上按鈕回到頁首,可增加好的使用者經驗(User Experience, UX)。


第1步:安裝jQuery

這個需要使用jQuery,請先檢查範本是否已有jQuery,以免重複安裝。建議使用最新的版本,可到Google Hosted Libraries查看。目前最新的版本是3.1.0:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

將上面的 script 複製貼上在 <head>...</head> 之中。

如果是 Blogger,到 範本 > 編輯 HTML 修改;如果是 WordPress,則到 Appearance > Editor > header.php

小貼士:可善用 async 屬性優化網頁解析速度,讓引入的 JavaScript 檔在背景載入。示範:

<script async='async' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


第2步:設定樣式

然後將貼上樣式:

如果是 Blogger,到 範本 > 自訂 > 進階 > 新增自訂 CSS  或直接在第1步的範本中修改;如果是 WordPress,則到 Appearance > Editor > style.css


第3步:執行jQuery

最後一步,把以下的 jQuery script 貼在 </body> 的上面。


如果是 Blogger,還是在範本中修改;如果是 WordPress,則到 Appearance > Editor > footer.php


不喜歡文字表達,可使用 Icon Font 取代第1行的「回到頁首」,本站使用的是免費的 Font Awesome

<i class="fa fa-chevron-up" aria-hidden="true"></i>


本文參考:

您或許喜歡

0 意見

精選文章

釋放C Drive空間:更改iTunes備份位置 | 電腦技巧 (2018.10.17更新)

最近電腦常警告我儲存空間不足!自問沒有安裝新程式,文件又全都儲存在 D Drive,到底容量都去哪了?終於發現因妹妹備份iPhone的緣故。於是找了解決方法,希望幫到遇上同樣問的的朋友。

Facebook