如何制作一个不引人注目的滚动按钮

便捷的返回顶部按钮能帮助用户快速回到页面顶部，无需费力滚动。对于内容丰富的页面、单页网站（尤其使用无限滚动时）、以及不同屏幕尺寸的移动设备，此功能尤为实用。

这些按钮通常悬浮于网站底部角落，点击即可返回页面顶部。使用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中文网其他相关文章！