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

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

方法一：簡(jiǎn)單實(shí)現(xiàn)

首先，用JavaScript選擇按鈕：

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

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

var rootElement = document.documentElement;

為按鈕添加點(diǎn)擊事件監(jiān)聽(tīng)器：

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

scrollToTopBtn.addEventListener("click", scrollToTop);

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

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

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

<button id="scrollToTopBtn">??</button>

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

方法二：檢測(cè)滾動(dòng)位置

使用滾動(dòng)事件監(jiān)聽(tīng)器檢測(cè)滾動(dòng)：

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

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

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

scrollHeight 減去 clientHeight 即為可垂直滾動(dòng)的總像素?cái)?shù)：

var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

scrollTotal 變量表示可垂直滾動(dòng)的最大像素?cái)?shù)。將已滾動(dòng)量除以總滾動(dòng)像素?cái)?shù)，得到 0 到 1 之間的比例。利用此比例，可以輕松切換按鈕顯示/隱藏。

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

JavaScript 代碼如下：

var rootElement = document.documentElement;

function handleScroll() {
  // 滾動(dòng)事件處理
  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 來(lái)正確定位按鈕：

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

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

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

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

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

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

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

這樣，當(dāng)用戶滾動(dòng)到頁(yè)面 80% 位置時(shí)按鈕出現(xiàn)，高于該位置時(shí)隱藏。

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

還有另一種方法可以解決這個(gè)問(wèn)題……

方法三：Intersection Observer

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

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

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

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

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

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

我們需要?jiǎng)?chuàng)建一個(gè)新的 IntersectionObserver 實(shí)例并傳入我們剛剛編寫(xiě)的回調(diào)函數(shù)：

let observer = new IntersectionObserver(callback);

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

observer.observe(target);

如何實(shí)現(xiàn)平滑滾動(dòng)？

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

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

html {
  scroll-behavior: smooth;
}

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

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

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