如何在沒有 jQuery 的情況下創建平滑的動畫滾動到頂部？

在許多瀏覽器中動畫滾動到頂部（jQuery 除外）

在a 上實現平滑的動畫“滾動到頂部”效果網頁是一個常見的需求。然而，依賴外部 JavaScript 函式庫（如 jQuery）可能是不可取的。本文介紹了一種無需額外框架即可創建此類動畫的跨瀏覽器解決方案。

理解腳本

提供的程式碼涉及遞歸函數稱為scrollTo，需要三個參數：

1. 元素： 滾動的目標元素（例如，document.body）
2. to：所需的滾動位置（例如，0 表示滾動到top)
3. duration: 動畫的持續時間（以毫秒為單位）

該函數計算元素當前滾動位置與所需滾動位置之間的差異，並應用一個小的增量每10 毫秒彌補一次差距。這會創建逐漸平滑的滾動效果。

使用範例

要使用此解決方案，只需包含答案中提供的JavaScript 程式碼片段並建立一個偵聽器要用於啟動捲動的元素上的單擊事件。這是一個範例：

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

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

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

以上是如何在沒有 jQuery 的情況下創建平滑的動畫滾動到頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！