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

這些按鈕通常懸浮于網(wǎng)站底部角落，點擊即可返回頁面頂部。使用JavaScript輕松創(chuàng)建，但視覺上需做到不顯眼，同時保持足夠大的點擊區(qū)域。讓我們看看幾種實現(xiàn)方法，從簡單到復(fù)雜。

方法一：簡單實現(xiàn)

首先，用JavaScript選擇按鈕：

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

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

var rootElement = document.documentElement;

為按鈕添加點擊事件監(jiān)聽器：

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

scrollToTopBtn.addEventListener("click", scrollToTop);

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

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

稍加樣式調(diào)整：

#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>

效果如下：（此處應(yīng)顯示方法一的效果圖）

方法二：檢測滾動位置

使用滾動事件監(jiān)聽器檢測滾動：

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

handleScroll 函數(shù)會在用戶每次滾動時被調(diào)用。我們需要獲取可滾動像素總數(shù)：

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

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

var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

scrollTotal 變量表示可垂直滾動的最大像素數(shù)。將已滾動量除以總滾動像素數(shù)，得到 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% 位置時按鈕出現(xiàn)，高于該位置時隱藏。

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

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

方法三：Intersection Observer

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

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

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

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

然后編寫一個回調(diào)函數(shù)，當元素與視窗“相交”（也就是進入視野）時執(zhí)行操作?；卣{(diào)函數(shù)接收一個條目數(shù)組作為參數(shù)。

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

我們需要創(chuàng)建一個新的 IntersectionObserver 實例并傳入我們剛剛編寫的回調(diào)函數(shù)：

let observer = new IntersectionObserver(callback);

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

observer.observe(target);

如何實現(xiàn)平滑滾動？

當然可以！事實上，Chris 在 2019 年就向我們展示了如何使用 CSS 實現(xiàn)：

<a href="http://m.miracleart.cn/link/2e6d941e3bc2dbd3f122040f056b6718">跳轉(zhuǎn)到頁面頂部</a>

html {
  scroll-behavior: smooth;
}

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

就是這樣！我們從一個非常簡單的想法開始。我們通過根據(jù)用戶的滾動位置顯示和隱藏按鈕來增強它。然后，我們通過實現(xiàn) Intersection Observer API 來代替監(jiān)視當前滾動位置，從而提高了性能。最后，我們看到了如何使用 CSS 來實現(xiàn)平滑滾動?？偠灾覀兊玫揭粋€易于查看和使用的返回頂部按鈕，同時不會阻塞頁面上的其他元素。

以上是如何制作一個不引人注目的滾動按鈕的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！