網頁實現「回到頂部」及「移至底部」功能
💻

網頁實現「回到頂部」及「移至底部」功能

Tags
Web
2022
Published
Published April 10, 2022

前言

在寫自己的部落格時,側欄用了 ToC 插件當作目錄,方便瀏覽網站的使用者方便檢索,但發現原生的 ToC 插件少了一個很方便的回到頂部移至底部的功能,有時候網頁內容比較長,要滑很久才能到頁面的頂部或底部,因此為了解決這個痛點,自己寫了一個 Javascript。

配置方式

HTML

  1. <head></head> 之間加入 jQuery cdn
    1. <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
  1. 設置 HTML class selector
    1. <body> <nav id="toc_custom" class="nav flex-column"> <a class="back-to-top nav-link" href="#" style="margin-left: 0px;">回到頂部</a> <a class="go-to-bottom nav-link" href="#" style="margin-left: 0px;">移至底部</a> </nav> </body>

Javascript

  1. 設置回到頂部語法
    1. <script> var backtotop = $('.back-to-top'); backtotop.click(function (e) { e.preventDefault(); e.stopPropagation(); scrollToTop(); }); function scrollToTop() { $('body, html').stop(true, true).animate({ scrollTop: 0 }, 100, "linear"); } </script>
  1. 設置移至底部語法
    1. <script> var gotobottom = $('.go-to-bottom'); gotobottom.click(function (e) { e.preventDefault(); e.stopPropagation(); scrollToBottom(); }); function scrollToBottom() { $('body, html').stop(true, true).animate({ scrollTop: $(document.body)[0].scrollHeight }, 100, "linear"); } </script>
  1. 完成,效果如下
    1. notion image

語法介紹

  • event.preventDefault():阻止 selector 元素發生默認的行為
  • event.stopPropagation():阻止任何 selector 元素的父元素發生的任何行為
  • $(selector).stop(stopAll,goToEnd):停止當前正在運行的動畫
    • stopAllbool,可選參數,將當前選擇的 selector 元素尚未完成的動畫佇列清空
    • goToEndbool,可選參數,將當前執行的動畫直接到達結束時刻的狀態
  • $(selector).animate({styles}, speed, easing, callback):執行 CSS 屬性集的自定義動畫
    • {styles}:要執行的 CSS
    • speedstring,可選參數,設定動畫的速度,默認值為 normal
      • slow:慢
      • normal:正常
      • fast:快
      • 毫秒,如 1500
    • easingstring,可選參數,設定動畫速度的 easing 函數
      • swing
      • linear
    • callbackfunction,可選參數,animate 函數執行完之後,要執行的函數