在 Vanilla JavaScript 中滾動到頂部
簡介
每當您有一個網站提示用戶向下滾動很長時間 - 提供一個按鈕來滾動回頂部是一個不錯的手勢！
注意： 源代碼在 GitHub 上。
開始使用
我們將從頭開始創建功能並對其進行樣式設置。使用 querySelector() ，我們將選擇創建的按鈕並根據用戶在頁面上的位置打開和關閉其可見性，並觸發一個事件以在每次點擊時滾動到頂部。
因為按鈕使用 CSS position 固定到某個位置（右下角） 屬性，此功能的標記可以插入到 body 內的任何位置 HTML 代碼的元素：
<div className="scroll-to-top">
<span class="btn btn-position btn-style">^</i>
</div>
添加後，我們可以為按鈕及其父 <div> 設置樣式 .我們將按鈕的位置固定在右下角，從底部和右側稍微偏移一點：
.scroll-to-top {
position: relative;
}
.btn-position {
position: fixed;
bottom: 40px;
right: 25px;
z-index: 20;
}
.btn-style {
background-color: #551b54;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
color: #fff;
cursor: pointer;
animation: movebtn 3s ease-in-out infinite;
transition: all 0.5s ease-in-out;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
我們設置了 visibility 這個按鈕的hidden 默認情況下，按鈕僅在用戶向下滾動到特定位置（Y 軸）時出現 - 我們稍後將通過使用 JavaScript 更改其屬性來做到這一點。最後，讓我們添加一個 hover 以及按鈕的一些動畫，使其不會靜止不動：
.icon-style:hover {
animation: none;
background: #fff;
color: #551b54;
border: 2px solid #551b54;
}
@keyframes movebtn {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(20px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
實現邏輯
現在按鈕已設置樣式且不可見 - 讓我們實現在用戶向下滾動時使其可見的邏輯。我們將通過 querySelector() 選擇它 並附上 EventListener 到元素：
const scrollBtn = document.querySelector(".btn");
現在，基於窗口 Y 值的位置（用戶垂直滾動了多少，從 0 開始 ) - 我們將設置 visibility "visible" 的元素 或 "hidden" 如果 Y 值低於某個閾值：
const btnVisibility = () => {
if (window.scrollY > 400) {
scrollBtn.style.visibility = "visible";
} else {
scrollBtn.style.visibility = "hidden";
}
};
現在我們有一個函數，當被調用時，它會檢查網頁是否已經向下滾動到 400 ，並設置 visibility 按鈕元素的 visible ，否則將其設置為 hidden .
最後——我們要反複調用這個函數來反複檢查位置並相應地調整可見性。這最好通過事件監聽器來完成 在每次滾動更改時觸發該功能：
document.addEventListener("scroll", () => {
btnVisibility();
});
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
我們要附加到事件偵聽器的最後一段代碼是在用戶單擊按鈕時以編程方式向後滾動的邏輯。 scrollToTop() window的功能 實例就是這樣做的！我們可以通過提供 Y 坐標來設置“頂部”是什麼，並且可以在每個 "click" 上調用該方法 按鈕上的事件：
scrollBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
注意： window.scrollTo() 有一個行為參數，指示滾動是應該輕柔地（平滑地）還是立即在一個步驟中進行（auto 默認值）。
而已！嘗試向下滾動頁面 - 將出現一個動畫按鈕。一旦完成並單擊它，您將順利返回頁面頂部：
結論
滾動到頁面頂部並不困難 - 即使使用事件偵聽器和動畫！在本動手指南中，我們學習瞭如何使用 Vanilla JavaScript 實現滾動到頂部功能並設置按鈕樣式。
