如何使用原生 JavaScript 建立平滑的捲動到頂部動畫？

用於平滑滾動到頂部的原生JavaScript 動畫

在用戶體驗方面，無縫且直觀的滾動到頂部動畫可以顯著增強網頁的功能。讓我們探索如何使用純 JavaScript 建立此動畫，而不是依賴 jQuery 或 Moo 等外部程式庫。

解決方案

提供的 JavaScript 函數，scrollTo，提供用於捲動到頁面上指定位置的跨瀏覽器解決方案。它需要三個參數：要滾動的元素（通常為 document.body）、所需的滾動位置（例如，0 表示頁面頂部）以及動畫的持續時間（以毫秒為單位）。

此函數利用一種遞歸技術，可以隨著時間的推移平滑地設定滾動動畫。它首先計算當前滾動位置與目標位置之間的差值，然後在每次遞歸呼叫中將滾動位置增加少量（perTick），直到到達目標位置。

用法

要將此動畫套用於連結或按鈕，請新增一個在點擊時呼叫scrollTo 的事件偵聽器。例如，以下程式碼片段在點擊「#scrollme」元素時建立捲動到頂部的動畫：

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click", runScroll, false);</code>

示範

查看在提供的程式碼片段中進行現場演示，以了解滾動到頂部動畫的工作原理。

結論

透過使用提供的scrollTo函數，您可以實現流暢的跨瀏覽器滾動到頂部動畫，無需外部庫。這種純 JavaScript 解決方案可以為您的 Web 開發專案提供更大的靈活性和客製化。

以上是如何使用原生 JavaScript 建立平滑的捲動到頂部動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！