Javascript 實作回到頂部按鈕
分類
建立時間: 2023年7月21日 17:05
更新時間: 2023年7月22日 23:15
說明
分享使用純 JavaScript 實作回到頂部按鈕,使用 Bootstrap 和 Animate.css 設計畫面。
預覽
要求
- 安裝 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 的門檻值可以自行調整。
觀看次數: 1112
animatebootstrapcssgojavascriptjstotop回到頂部按鈕
一杯咖啡的力量,勝過千言萬語的感謝。
支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!