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

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

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

首先，用JavaScript選擇按鈕：

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

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

 var rootElement = document.documentElement;

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

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

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

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

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

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

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

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

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

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

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)到頁面總高度的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 來正確定位按鈕：

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

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

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

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

方法三：Intersection Observer

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

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

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

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

然後編寫一個(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í)例並傳入我們剛剛編寫的回調(diào)函數(shù)：

 let observer = new IntersectionObserver(callback);

最後，我們告訴觀察者開始觀察上面選擇的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)到頁面頂部</a>

html {
  scroll-behavior: smooth;
}

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

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

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