在 JavaScript 中滾動到頁面頂部
-
在 JavaScript 中使用 Vanilla JS
window.scrollTo()方法滾動到頁面頂部 -
使用動畫 Vanilla JS 滾動到頁面頂部 -
window.scrollTo()方法的新形式 -
使用 jQuery
scrollTop()方法滾動到頁面頂部 -
通過使用 jQuery
animate()方法動畫滾動到頁面頂部
為長網頁提供 UI 元素以讓使用者滾動到頁面頂部 JavaScript 至關重要。在本教程中，你將找到幾種滾動到頂部的 JavaScript 方法。
我們將使用原生 JavaScript scrollTo 方法。我們還將展示如何使用 jQuery scrollTop() 方法和 scrollTop 屬性滾動到頂部（請閱讀以瞭解使用 jQuery 的好處）。
我們還將提供額外的技巧：一個巧妙的單行純 HTML 快捷方式和一個自定義 vanilla JS 動畫來滾動到頁面頂部。
在 JavaScript 中使用 Vanilla JS window.scrollTo() 方法滾動到頁面頂部
你可以使用 vanilla JS window.scrollTo() 方法滾動到 JavaScript 中的頁面頂部。使用 window.scrollTo() 方法，我們可以滾動到文件中任何指定的 x 和 y 座標集。
此方法的舊形式如下所示：
window.scrollTo(x-coordinate,y-coordinate);
我們可以通過傳入 (0,0) 作為座標引數來使用它滾動到 JavaScript 中的頁面頂部。
let scrollTopBtn = document.getElementById("top");
scrollTopBtn.addEventListener("click",function(){
window.scrollTo(0,0);
});
（請參閱隨附的 HTML 和 CSS 檔案以輕鬆跟隨程式碼。）
你可以在下面看到此程式碼的演示：
使用動畫 Vanilla JS 滾動到頁面頂部 - window.scrollTo() 方法的新形式
上述解決方案完成了工作，但它並不能帶來良好的使用者體驗。
window.scrollTo() 方法還有一種新形式，可以讓我們為滾動運動設定動畫。你可以使用這個漂亮的小動畫效果來改進 UX 和使用者參與度指標。
新表單的工作方式如下：
window.scrollTo(options)
// options is a JSON objectwith
// top: the y-coordinate to scroll to
//left : the x-coordinate to scroll to
// behavior : an animated effect with vrious string values like 'smooth', 'slow' etc.
我們可以使用這種方法的這種形式使用 vanilla JavaScript 動畫滾動到頁面頂部。
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click',function(){
window.scrollTo({top: 0, behavior:'smooth'});
});
（請參閱隨附的 HTML 和 CSS 檔案以獲得更好的理解。）
程式碼很簡單。我們將事件偵聽器附加到按鈕以觸發滾動頂部功能。
回撥以新形式實現了 window.scrollTo() 方法。我們通過 top:0 滾動到頂部，我們通過 behavior: 'smooth' 以獲得一個很好的均勻動畫效果。
你可以在此處檢視工作演示：
詳細瞭解 vanilla JS window.scrollTo() 方法此處。
使用 jQuery scrollTop() 方法滾動到頁面頂部
你還可以使用 jQuery scrollTop() 方法滾動到頁面頂部。
$("#top").on("click",function(){
$(window).scrollTop(0);
});
邏輯很簡單。我們附加了一個事件處理程式來監聽滾動到頂部按鈕時的 click 事件。
回撥執行 $(window).scrollTop(0) 方法並滾動到頁面頂部，因為我們將 0 作為其引數傳遞。
你可以在此處檢視工作演示：
通過使用 jQuery animate() 方法動畫滾動到頁面頂部
像上面的 vanilla JS 解決方案一樣，我們可以使用 jQuery 動畫滾動到頁面頂部以改善 UX。
$("#top").on("click",function(){
$([document.documentElement,document.body]).animate({
scrollTop:0
},1000)
});
讓我們深入探討這裡的邏輯。
事件監聽器的回撥首先選擇了 document.documentElement（根元素）或 document.body。我們需要選擇兩者以確保跨瀏覽器相容性。
（提示：這是我們使用 jQuery 的原因之一。稍後會詳細介紹。）
然後，我們在選定物件上執行 animate() 方法並更改 scrollTop 屬性以達到 0 值（頁面頂部。）
最後，我們將動畫持續時間作為第二個引數傳遞給回撥。我們在這裡通過了 1000 毫秒，但你可以選擇任何你喜歡的時間跨度。
這是此方法的工作輸出：
專業提示：我們使用 jQuery 來確保更好的跨瀏覽器相容性。有時，UI 可能會在不同的瀏覽器中呈現奇怪的效果，並且很難排除故障。
由於 jQuery 是一個專業的前端庫，它的優勢在於可以解決跨瀏覽器不相容的問題。因此，如果你的 vanilla JS 解決方案在某些瀏覽器中出現問題，你可以改用該方法的 jQuery 版本。
一行聰明的純 HTML 滾動到頁面頂部 Hack
你還可以使用單行 HTML hack 滾動到頁面頂部（沒有動畫）。
<div>
<a href="#">To Top</a>
</div>
這是輸出的演示。
使用舊的 scrollTop 屬性滾動到頁面頂部
一些瀏覽器對我們上面使用的 vanilla JS scrollTo() 方法存在問題。例如，許多使用者報告說 MS Edge 並不總是能很好地使用這種方法，
因此，你可以使用帶有 scrollTop 屬性的舊方法。scrollTop 屬性設定要垂直滾動元素的畫素。
但是，此屬性的一個特殊情況是，當你將其應用於根或 html 元素時，它會移動整個文件。
在此處詳細瞭解 scrollTop 屬性。
我們可以使用此屬性滾動到頁面頂部。
let scrollTopBtn = document.getElementById("top");
scrollTopBtn.addEventListener("click",function(){
document.getElementsByTagName('html')[0].scrollTop = 0;
});
程式碼很簡單。回撥選擇了 html 元素並將其 scrollTop 屬性設定為 0。
你可以在下面看到工作演示：
使用 JavaScript 動畫指令碼自定義滾動到頁面頂部
最後，我們有一個不錯的小指令碼來設計自定義滾動到頂部的 JavaScript 動畫。我們使用 setInteval() 和 clearInterval() 函式來執行動畫效果。
let scrollTopBtn = document.getElementById("top");
scrollTopBtn.addEventListener("click",function(){
let customAnimScroll = window.setInterval(function(){
let topOffset = window.pageYOffset;
if (topOffset > 0) {
window.scrollTo({top:topOffset - 20});
}
else{
clearInterval(customAnimScroll);
}
}, 20);
});
讓我們分解這裡的邏輯。
我們在滾動到頂部按鈕上的事件處理程式回撥內的 window 物件上執行了 setInterval() 函式。setInterval 函式在特定持續時間後重復執行我們傳遞給它的回撥。
它還返回了一個我們儲存的 ID，用於啟動/停止/修改 setInterval() 方法的特定例項。因此，我們執行 setInterval() 方法並將其 ID 儲存在 customAnimScroll 變數中。
setInterval() 函式的回撥將 window 物件的 pageYOffset 值儲存在 topOffset 變數中。該值是 window 物件向下滾動的畫素數。
最後，我們檢查了 topOffset 值是否大於 0（意味著 window 向下滾動了一些畫素）。如果是，我們使用上面看到的新形式的 scrollTo 方法將 window 向上移動 20 個畫素。
在這裡，我們選擇每個週期向上移動 20 個畫素，但你可以選擇任何其他數字。
如果 topOffset 值不大於 0，我們已經滾動到 window 的頂部。在這種情況下，我們通過將之前儲存在 customAnimScroll 變數中的 ID 傳遞給 clearInterval() 方法來結束 setInterval() 函式。
你可以在此處檢視工作演示：
