Javascript 實作回到頂部按鈕

分類

建立時間: 2023年7月21日 17:05

更新時間: 2023年7月22日 23:15

說明

分享使用純 JavaScript 實作回到頂部按鈕，使用 Bootstrap 和 Animate.css 設計畫面。

預覽

preview

要求

安裝 Bootstrap
安裝 Animate.css

為了方便起見，我都用 CDN 的方式安裝

HTML

首先先使用 CDN 的方式安裝 Bootstrap 和 Animate.css

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
          rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous"></script>
</head>

接著你需要自訂一個 script 用來實作回到頂部按鈕，這裡假設 article.js 為例。

<head>
    <script src="article.js"></script>
</head>

接著是實作按鈕，以下 div 都是排版用，你可以依自己的需求調整，最主要的是 javascript 會透過 button 按鈕 id 屬性取的 button element，另一個重點是 button class animate__animated 這個是使用 Animate.css 擴充必須加入的 class，等等會用 javascript 實作淡入淡出的效果。

<div class="container">
    <div class="d-flex justify-content-end sticky-bottom me-2">
        <div class="py-4">
            <button class="btn btn-outline-info rounded-circle d-none animate__animated"
                    id="gotToTopButton"
                    type="button">
                <i class="bi bi-arrow-up"></i>
            </button>
        </div>
    </div>
</div>

Javascript

在 article.js 實作回到頂部按鈕。

article.js

/** @type {HTMLElement} 回到頂部按鈕 */
let goToTopButton

window.addEventListener('load', () => {
  goToTopButton = document.getElementById('gotToTopButton')
  toggleGoToTopButtonVisibility()

  goToTopButton.addEventListener('click', (event) => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  window.addEventListener('scroll', () => {
    toggleGoToTopButtonVisibility()
  })
})

/**
 * 檢查回到頂部按鈕是否顯示
 */
function toggleGoToTopButtonVisibility () {
  if (
    window.scrollY > 20 &&
    !goToTopButton.classList.contains('animate__fadeIn')
  ) {
    goToTopButton.classList.add('animate__fadeIn')
    goToTopButton.classList.remove('animate__fadeOut')
    goToTopButton.classList.remove('disabled')
    goToTopButton.classList.remove('d-none')
  } else if (
    window.scrollY <= 20 &&
    !goToTopButton.classList.contains('animate__fadeOut')
  ) {
    goToTopButton.classList.add('animate__fadeOut')
    goToTopButton.classList.add('disabled')
    goToTopButton.classList.remove('animate__fadeIn')
  }
}

監聽 load 事件是為了等 HTML 元素載入，scroll 是監聽滾動的事件。

goToTopButton click 事件調用 window.scrollTo() 方法來滾動，behavior: 'smooth' 效果是平滑滾動，你也可以成 instant 讓它瞬間滾動。

toggleGoToTopButtonVisibility() 函式主要是用來切換回到頂部的按鈕是否要顯示，這裡全依賴 Bootstrap 和 Animate.css 的 class 實現渲染效果，scrollY 是垂直方向已滾動的像素值，scrollY 的門檻值可以自行調整。

觀看次數: 748

animatebootstrapcssgojavascriptjstotop回到頂部按鈕

按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁

每週分享資訊技術

Enjoy 享受軟體

一杯咖啡的力量，勝過千言萬語的感謝。

支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！