分類
網站開發

回到頁首(Back to Top)按鈕

簡單地為網頁加上回到頁首(Back to Top)按鈕。

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

本文參考:

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *

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