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