跨瀏覽器 JavaScript 滾動到頂部動畫(不帶 jQuery)
許多 Web 開發人員依賴 jQuery 實現無縫頁面滾動功能。然而,對於不想使用外部程式庫的人來說,有一個簡單的解決方案,可以使用純 JavaScript 捲動到頁面頂部。
要實現跨瀏覽器滾動到頂部動畫,請按照以下步驟操作:
定義scrollTo函數:建立一個接受三個參數的函數:element、to和duration。該函數將處理動畫。
function scrollTo(element, to, duration) {
計算差異與每刻度增量:在函數內部,計算目前滾動位置與所需位置(to) 之間的差異,並將其除以持續時間以確定每刻度增量。
if (duration
設定動畫循環:使用setTimeout設定以10毫秒的頻率運行的動畫循環。在循環內,以每個刻度增量增加滾動位置,檢查是否已到達所需位置。
setTimeout(function() {
element.scrollTop = element.scrollTop perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
用法:要平滑捲動到頁面頂部,請像這樣呼叫scrollTo函數:
scrollTo(document.body, 0, 600);
添加點擊事件監聽器:如果您有一個應該觸發滾動動畫的鏈接或按鈕,添加點擊事件監聽器,點擊時調用該函數。
var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click", runScroll, false);
這段純JavaScript程式碼提供了一個簡單而有效的方法來實現跨瀏覽器滾動到頂部動畫,讓您增強使用者體驗導航無需jQuery 等外部函式庫。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3