如何用純 JavaScript 創建跨瀏覽器「滾動到頂部」動畫？

純JavaScript 中的跨瀏覽器“滾動到頂部”動畫

簡介：

透過提供無縫的「滾動到頂部」動畫來增強使用者可訪問性對於現代Web 開發至關重要。雖然像 jQuery 這樣的 JavaScript 程式庫提供了方便的解決方案，但純粹在 JavaScript 中實現此功能有利於輕量級和跨瀏覽器相容性。

解決方案：

提供的 JavaScript 函數, scrollTo，使您能夠為任何頁面元素實現平滑的滾動到頂部動畫。它需要三個參數：

• element：要捲動的 HTML 元素（通常是整個頁面的 document.body）。
• 到：所需的滾動位置（以像素為單位）。
• 持續時間：動畫持續時間（以毫秒為單位）（設定為 600 毫秒以獲得流暢的動畫）。

函數分解：

• if (duration ：如果動畫持續時間小於或等於0 ，則退出函數。
• var Difference = to - element.scrollTop：計算目標捲動位置與目前位置的差值。
• var perTick = 差值 / 持續時間 * 10：決定每個間隔滾動的量。
• setTimeout(...)：設定定期執行動畫循環的超時時間（10ms）。
• element.scrollTop = element.scrollTop perTick：透過計算的 perTick 值更新滾動位置。
• 如果捲動位置尚未等於目標，則函數呼叫自身遞歸地減少持續時間，直到達到目標。

用法：

將scrollTo函數合併到您的HTML 中：

<code class="html"><button id="scrollme" type="button">Go to Top</button></code>

點擊事件處理程序附加到按鈕：

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

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

結論：

此程式碼段提供了一個用於創建跨域的多功能工具使用本機JavaScript 的瀏覽器滾動到頂部動畫。其簡單性和靈活性使其適用於廣泛的 Web 應用程式。

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