回到頁首(Back to Top)按鈕

2016-09-11

Responsive Website Design 回應式網頁設計

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

第1步:安裝jQuery

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

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

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

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

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

<script
  async='async'
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></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="fas fa-chevron-up"></i>

本文參考:

免費按讚支持創作

喜歡我的文章,請在下面按讚 5 下,助我得到 LikeCoin 獎賞,支持我繼續創作免費內容。

行有餘力,可以成為我的讚賞公民,每月送我一杯咖啡,從此每份贊助,都會化成實質支持。

作者簡介

香港斜槓族,喜歡學習的宅女。打工時期做過行銷、教育及IT行業。自學技能包括:網站開發、網路行銷、影片製作、平面設計等。

希望透過內在自我認知及外在技能培養的分享,幫助網路創業者實現理想生活,共建和諧美好的世界。

提交評論

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

本網站受 reCAPTCHA 保護,並適用 Google 隱私政策服務條款