整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本教程中，您將通過幾個簡短的步驟學習如何使用 CSS 插入簡寫和原生 JavaScript 創(chuàng)建滾動到頂部按鈕。
滾動到頂部按鈕對于具有大量內(nèi)容的網(wǎng)站、無限滾動的頁面或具有可能導(dǎo)致內(nèi)容滾動擴展的小屏幕的移動設(shè)備非常有用。
第一步，創(chuàng)建按鈕
要創(chuàng)建滾動按鈕，請使用帶 href="#" 的錨標記，這會使瀏覽器在單擊時返回頁面頂部，或者您可以使用自定義 Id 返回頁面的特定部分。
<a href="#">scroll-to-top</a>
第二步，按鈕的位置和樣式
要使按鈕位置相對于視口固定，您需要在錨標記上設(shè)置位置：固定。 當元素位置固定時，它會從正常的文檔流中移除，然后使用相對于視口的 top、right、bottom 和 left 屬性進行定位。
雖然，有一個用于定位屬性的簡寫，稱為 inset。
Inset 的作用類似于 margin 簡寫，用于將 margin-top、margin-right、margin-bottom 和 margin-left 設(shè)置為一體。
句法
inset: top right bottom left
當 auto 用作 inset 的值時，它認為該值被省略。
因此，您可以使用下面的插圖將按鈕放置在視口的右下角。
inset: auto 2em 2em auto;
要將所有內(nèi)容放在一起，請將類 scrollToTopBtn 添加到錨標記并設(shè)置按鈕的樣式，如下所示。
.scrollToTopBtn {
color: #f2f2f2;
background-color: #151515;
text-decoration: none;
border-radius: 25px;
position: fixed;
outline: none;
z-index: 100;
padding: 0.75em 1.5em;
inset: auto 2em 2em auto;
}第三步，讓按鈕響應(yīng)
現(xiàn)在滾動到頂部按鈕的樣式已正確放置，并且可以正常工作。但是有一個問題，按鈕總是可見的。要解決這個問題，您需要使用 JavaScript 根據(jù)頁面滾動來隱藏和顯示按鈕。
為此，首先，獲取按鈕并將其存儲在變量中。
const scrollToTopBtn=document.querySelector(".scrollToTopBtn");
然后獲取偏移值的文檔的根元素。
const rootElement=document.documentElement;
接下來，您應(yīng)該在滾動事件上注冊一個事件偵聽器來計算按鈕的可見性狀態(tài)。
const handleScroll=()=> {}
document.addEventListener("scroll", handleScroll);
每次用戶滾動時都會調(diào)用 handleScroll 函數(shù)。
之后，您需要可以滾動的像素總數(shù)，并且要在 handleScroll 函數(shù)中得到它，您需要通過 clientHeight 減去 scrollHeight 以獲得可以滾動的像素總數(shù)。
const scrollTotal=rootElement.scrollHeight - rootElement.clientHeight;
現(xiàn)在您已經(jīng)擁有可以滾動的最大像素數(shù)，您需要將其除以頁面已滾動的數(shù)量，以獲得介于 0 和 1 之間的滾動比率。使用滾動比率，您可以調(diào)整要隱藏的位置并顯示按鈕。越接近 1，用戶在看到按鈕之前滾動的次數(shù)就越多。
if ((rootElement.scrollTop / scrollTotal) > 0.25) {
// Show the button
scrollToTopBtn.classList.add("isVisible")
} else {
// Hide the button
scrollToTopBtn.classList.remove("isVisible")
}最后，要使其工作，首先需要添加 opacity: 0; 到 scrollToTopBtn 類以在頁面加載時隱藏按鈕。 然后添加類 isVisible 與 opacity: 1; 當頁面滾動通過您選擇的比率時，按鈕。 最后但同樣重要的是，添加過渡：所有 250 毫秒的緩入緩出； 為按鈕設(shè)置動畫的 scrollToTopBtn 類。
.scrollToTopBtn {
color: #f2f2f2;
background-color: #151515;
text-decoration: none;
border-radius: 25px;
position: fixed;
outline: none;
z-index: 100;
opacity: 0;
padding: 0.75em 1.5em;
inset: auto 2em 2em auto;
transition: all 250ms ease-in-out;
}.isVisible {
opacity: 1;
}第四步，修復(fù)不需要的點擊
當滾動到頂部按鈕被隱藏時，它仍然可以被點擊，這是不應(yīng)該發(fā)生的。 要解決這個問題，請?zhí)砑又羔樖录簾o； 類 scrollToTopBtn 忽略點擊事件并添加指針事件：自動； 類 isVisible 以在按鈕可見時將點擊事件帶回按鈕。
.scrollToTopBtn {
color: #f2f2f2;
background-color: #151515;
text-decoration: none;
border-radius: 25px;
position: fixed;
outline: none;
z-index: 100;
opacity: 0;
pointer-events: none;
padding: 0.75em 1.5em;
inset: auto 2em 2em auto;
transition: all 250ms ease-in-out;
}.isVisible {
pointer-events: auto;
opacity: 1;
}第五步，給頁面添加平滑滾動
現(xiàn)在滾動到頂部按鈕仍然可以正常工作，您可以通過平滑滾動為您的網(wǎng)站添加漂亮的觸感。 為此，只需添加 scroll-behavior: smooth; 到 html 標簽。
html {
scroll-behavior: smooth;
}
總結(jié)
滾動到頂部按鈕是一個簡單而有用的功能，可以極大地改善您網(wǎng)站的用戶體驗。 在本教程中，我向您展示了如何在沒有任何庫的情況下使用幾行代碼構(gòu)建滾動到頂部按鈕。
將HTML / CSS滾動到頂部
直接上例子代碼給大家一點參考:
<html>
<style>
span {
display: block;
height: 150%;
} /*整點上下的空白 */
</style>
<body>
<button id="from">點擊我</button>
<span></span>
<div id="to">滾動到這:頭條@plzbefat</div>
<span></span>
</body>
<script>
document.getElementById("from").addEventListener("click", ()=> {
document.getElementById("to").scrollIntoView({
behavior: "smooth", //順滑的滾動
});
});
</script>
</html>
整點例子沒毛病
element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滾動 元素在頂部
element.scrollIntoView(false); // 滾動 元素在底部
element.scrollIntoView(option); //參數(shù)alignToTop:
如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
