如何使用純 JavaScript 實作跨瀏覽器滾動到頂部動畫？

跨瀏覽器JavaScript 捲動到頂部動畫（不含jQuery）

許多Web 開發人員依賴jQuery 來實現無縫相依頁滾動功能。然而，對於不想使用外部程式庫的人來說，有一個簡單的解決方案，可以使用純 JavaScript 捲動到頁面頂部。

要實現跨瀏覽器捲動到頂部動畫，請按照以下步驟操作：

1. 定義scrollTo函數：建立一個接受三個參數的函數：element、to和duration。此函數將處理動畫。

   <code class="javascript">function scrollTo(element, to, duration) {</code>

2. 計算差異和每刻度增量：在函數內部，計算當前滾動位置與當前滾動位置之間的差異所需位置(to ) 並將其除以持續時間以確定每刻度增量。

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

3. 設定動畫循環：使用 setTimeout 來設定以 10 毫秒的頻率運行的動畫循環。在循環內，以每個刻度增量增加滾動位置，檢查是否已達到所需位置。

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. 用法：平滑捲動到頁頂部，像這樣呼叫scrollTo函數：

   <code class="javascript">scrollTo(document.body, 0, 600);

5. <code class="html"><button id="scrollme" type="button">To the top</button></code>

   <code class="javascript">var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);</code>

新增點擊事件監聽器

：如果您有一個連結或按鈕，應該會觸發滾動動畫，添加點擊事件監聽，點擊時調用該函數。

這段純JavaScript程式碼提供了一種簡單而有效的方法來實現跨瀏覽器滾動到頂部動畫，讓您無需使用jQuery 等外部庫即可增強使用者導航。

以上是如何使用純 JavaScript 實作跨瀏覽器滾動到頂部動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！