七爪源碼：如何使用 vanilla JS &

七爪源碼：如何使用 vanilla JS & CSS 創建滾動到頂部按鈕

本教程中，您將通過幾個簡短的步驟學習如何使用 CSS 插入簡寫和原生 JavaScript 創建滾動到頂部按鈕。

滾動到頂部按鈕對于具有大量內容的網站、無限滾動的頁面或具有可能導致內容滾動擴展的小屏幕的移動設備非常有用。

第一步，創建按鈕

要創建滾動按鈕，請使用帶 href="#" 的錨標記，這會使瀏覽器在單擊時返回頁面頂部，或者您可以使用自定義 Id 返回頁面的特定部分。

<a href="#">scroll-to-top</a>

第二步，按鈕的位置和樣式

要使按鈕位置相對于視口固定，您需要在錨標記上設置位置：固定。當元素位置固定時，它會從正常的文檔流中移除，然后使用相對于視口的 top、right、bottom 和 left 屬性進行定位。

雖然，有一個用于定位屬性的簡寫，稱為 inset。

Inset 的作用類似于 margin 簡寫，用于將 margin-top、margin-right、margin-bottom 和 margin-left 設置為一體。

句法

inset: top right bottom left

當 auto 用作 inset 的值時，它認為該值被省略。

因此，您可以使用下面的插圖將按鈕放置在視口的右下角。

inset: auto 2em 2em auto;

要將所有內容放在一起，請將類 scrollToTopBtn 添加到錨標記并設置按鈕的樣式，如下所示。

.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;
}

第三步，讓按鈕響應

現在滾動到頂部按鈕的樣式已正確放置，并且可以正常工作。但是有一個問題，按鈕總是可見的。要解決這個問題，您需要使用 JavaScript 根據頁面滾動來隱藏和顯示按鈕。

為此，首先，獲取按鈕并將其存儲在變量中。

const scrollToTopBtn=document.querySelector(".scrollToTopBtn");

然后獲取偏移值的文檔的根元素。

const rootElement=document.documentElement;

接下來，您應該在滾動事件上注冊一個事件偵聽器來計算按鈕的可見性狀態。

const handleScroll=()=> {}
document.addEventListener("scroll", handleScroll);

每次用戶滾動時都會調用 handleScroll 函數。

之后，您需要可以滾動的像素總數，并且要在 handleScroll 函數中得到它，您需要通過 clientHeight 減去 scrollHeight 以獲得可以滾動的像素總數。

const scrollTotal=rootElement.scrollHeight - rootElement.clientHeight;

現在您已經擁有可以滾動的最大像素數，您需要將其除以頁面已滾動的數量，以獲得介于 0 和 1 之間的滾動比率。使用滾動比率，您可以調整要隱藏的位置并顯示按鈕。越接近 1，用戶在看到按鈕之前滾動的次數就越多。

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 毫秒的緩入緩出；為按鈕設置動畫的 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;
}

第四步，修復不需要的點擊

當滾動到頂部按鈕被隱藏時，它仍然可以被點擊，這是不應該發生的。要解決這個問題，請添加指針事件：無；類 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;
}

第五步，給頁面添加平滑滾動

現在滾動到頂部按鈕仍然可以正常工作，您可以通過平滑滾動為您的網站添加漂亮的觸感。為此，只需添加 scroll-behavior: smooth; 到 html 標簽。

html {
scroll-behavior: smooth;
}

總結

滾動到頂部按鈕是一個簡單而有用的功能，可以極大地改善您網站的用戶體驗。在本教程中，我向您展示了如何在沒有任何庫的情況下使用幾行代碼構建滾動到頂部按鈕。

將HTML / CSS滾動到頂部

lement.scrollIntoView()

直接上例子代碼給大家一點參考:

<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); //參數

參數

alignToTop:

如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。

在線咨詢

上一篇：你真的會用Jupyter嗎？這里有7個進階功能助你效
下一篇：Python爬蟲框架scrapy 爬取縱橫網，小說免

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

七爪源碼：如何使用 vanilla JS &amp;

lement.scrollIntoView()

語法

參數

您的項目需求

七爪源碼：如何使用 vanilla JS &