如何製作一個不引人注目的滾動按鈕

便捷的返回頂部按鈕能幫助用戶快速回到頁面頂部，無需費力滾動。對於內容豐富的頁面、單頁網站（尤其使用無限滾動時）、以及不同屏幕尺寸的移動設備，此功能尤為實用。

這些按鈕通常懸浮於網站底部角落，點擊即可返回頁面頂部。使用JavaScript輕鬆創建，但視覺上需做到不顯眼，同時保持足夠大的點擊區域。讓我們看看幾種實現方法，從簡單到復雜。

方法一：簡單實現

首先，用JavaScript選擇按鈕：

 var scrollToTopBtn = document.getElementById("scrollToTopBtn");

document.documentElement返回文檔的根元素，用於獲取偏移值。將其保存在名為rootElement的變量中，方便代碼調用：

 var rootElement = document.documentElement;

為按鈕添加點擊事件監聽器：

 function scrollToTop() {
  // 返回頂部邏輯}

scrollToTopBtn.addEventListener("click", scrollToTop);

在scrollToTop函數中，使用scrollTo方法滾動到屏幕頂部：

 function scrollToTop() {
  // 返回頂部邏輯rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

稍加樣式調整：

 #scrollToTopBtn {
  background-color: black;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 16px;
  line-height: 48px;
  width: 48px;
}

將按鈕放置在頁面底部（例如頁腳）：

 <button id="scrollToTopBtn">☝️</button>

效果如下：（此處應顯示方法一的效果圖）

方法二：檢測滾動位置

使用滾動事件監聽器檢測滾動：

 function handleScroll() {
  // 滾動事件處理}
document.addEventListener("scroll", handleScroll);

handleScroll函數會在用戶每次滾動時被調用。我們需要獲取可滾動像素總數：

• scrollHeight返回元素高度，包括因溢出而不可見的部分。
• clientHeight返回元素可見部分的高度（像素）。

scrollHeight減去clientHeight即為可垂直滾動的總像素數：

 var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

scrollTotal變量表示可垂直滾動的最大像素數。將已滾動量除以總滾動像素數，得到0 到1 之間的比例。利用此比例，可以輕鬆切換按鈕顯示/隱藏。

例如，當用戶滾動到頁面總高度的80%（比例為0.80）時顯示返回頂部按鈕。 80% 是一個任意值，越接近1，用戶需要滾動更多才能看到按鈕。

JavaScript 代碼如下：

 var rootElement = document.documentElement;

function handleScroll() {
  // 滾動事件處理var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
  if ((rootElement.scrollTop / scrollTotal) > 0.80) {
    // 顯示按鈕scrollToTopBtn.classList.add("showBtn");
  } else {
    // 隱藏按鈕scrollToTopBtn.classList.remove("showBtn");
  }
}

document.addEventListener("scroll", handleScroll);

需要一些CSS 來正確定位按鈕：

 .scrollToTopBtn {
  /* 與之前相同的通用樣式*/

  /* 將其放置在右下角*/
  position: fixed;
  bottom: 30px;
  right: 30px;

  /* 保持在所有其他元素之上*/
  z-index: 100;

  /* 使用不透明度隱藏*/
  opacity: 0;

  /* 添加平移效果*/
  transform: translateY(100px);

  /* 添加過渡效果*/
  transition: all 0.5s ease;
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

這樣，當用戶滾動到頁面80% 位置時按鈕出現，高於該位置時隱藏。

這看起來是個不錯的選擇，添加事件監聽器也很容易。但由於始終檢查當前滾動位置，性能開銷可能很大。

還有另一種方法可以解決這個問題……

方法三：Intersection Observer

Intersection Observer API 是一個很好的解決方案。這是一個相當新的瀏覽器API，可以讓開發者將大部分任務交給瀏覽器處理，從而實現更優化的性能。 Travis Almand 對其工作原理進行了詳盡的解釋。 MDN 的定義如下：

Intersection Observer API 提供了一種異步觀察目標元素與其祖先元素或頂級文檔視窗交叉變化的方法。

很巧妙！這意味著按鈕可以作為我們的目標元素：

 // 選擇要定位的元素var target = document.querySelector("footer");

然後編寫一個回調函數，當元素與視窗“相交”（也就是進入視野）時執行操作。回調函數接收一個條目數組作為參數。

 function callback(entries, observer) {
  // 回調函數將返回一個條目數組，即使您只觀察一個項目entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 顯示按鈕scrollToTopBtn.classList.add('showBtn');
    } else {
      // 隱藏按鈕scrollToTopBtn.classList.remove('showBtn');
    }
  });
}

我們需要創建一個新的IntersectionObserver實例並傳入我們剛剛編寫的回調函數：

 let observer = new IntersectionObserver(callback);

最後，我們告訴觀察者開始觀察上面選擇的target 元素與視窗相交的情況：

 observer.observe(target);

如何實現平滑滾動？

當然可以！事實上，Chris 在2019 年就向我們展示瞭如何使用CSS 實現：

<a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718">跳轉到頁面頂部</a>

html {
  scroll-behavior: smooth;
}

這裡還有一些細微之處，例如Chris 在文章中也介紹的可訪問性增強功能。關鍵在於CSS 正在獲得新的功能，可以完成我們過去使用JavaScript 完成的任務。

就是這樣！我們從一個非常簡單的想法開始。我們通過根據用戶的滾動位置顯示和隱藏按鈕來增強它。然後，我們通過實現Intersection Observer API 來代替監視當前滾動位置，從而提高了性能。最後，我們看到瞭如何使用CSS 來實現平滑滾動。總而言之，我們得到一個易於查看和使用的返回頂部按鈕，同時不會阻塞頁面上的其他元素。

以上是如何製作一個不引人注目的滾動按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！