前军教程网

在本教程中，您将通过几个简短的步骤学习如何使用 CSS 插入简写和原生 JavaScript 创建滚动到顶部按钮。

滚动到顶部按钮对于具有大量内容的网站、无限滚动的页面或具有可能导致内容滚动扩展的小屏幕的移动设备非常有用。

第一步，创建按钮

要创建滚动按钮，请使用带 href="#" 的锚标记，这会使浏览器在单击时返回页面顶部，或者您可以使用自定义 Id 返回页面的特定部分。

<a href="#">scroll-to-top</a>

第二步，按钮的位置和样式

要使按钮位置相对于视口固定，您需要在锚标记上设置位置：固定。 当元素位置固定时，它会从正常的文档流中移除，然后使用相对于视口的 top、right、bottom 和 left 属性进行定位。

虽然，有一个用于定位属性的简写，称为 inset。

Inset 的作用类似于 margin 简写，用于将 margin-top、margin-right、margin-bottom 和 margin-left 设置为一体。

句法

inset: top right bottom left

当 auto 用作 inset 的值时，它认为该值被省略。

因此，您可以使用下面的插图将按钮放置在视口的右下角。

inset: auto 2em 2em auto;

要将所有内容放在一起，请将类 scrollToTopBtn 添加到锚标记并设置按钮的样式，如下所示。

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
}

第三步，让按钮响应

现在滚动到顶部按钮的样式已正确放置，并且可以正常工作。但是有一个问题，按钮总是可见的。要解决这个问题，您需要使用 JavaScript 根据页面滚动来隐藏和显示按钮。

为此，首先，获取按钮并将其存储在变量中。

const scrollToTopBtn = document.querySelector(".scrollToTopBtn");

然后获取偏移值的文档的根元素。

const rootElement = document.documentElement;

接下来，您应该在滚动事件上注册一个事件侦听器来计算按钮的可见性状态。

const handleScroll = () => {}
document.addEventListener("scroll", handleScroll);

每次用户滚动时都会调用 handleScroll 函数。

之后，您需要可以滚动的像素总数，并且要在 handleScroll 函数中得到它，您需要通过 clientHeight 减去 scrollHeight 以获得可以滚动的像素总数。

const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

现在您已经拥有可以滚动的最大像素数，您需要将其除以页面已滚动的数量，以获得介于 0 和 1 之间的滚动比率。使用滚动比率，您可以调整要隐藏的位置并显示按钮。越接近 1，用户在看到按钮之前滚动的次数就越多。

if ((rootElement.scrollTop / scrollTotal) > 0.25) {
    // Show the button
    scrollToTopBtn.classList.add("isVisible")
} else {
    // Hide the button
    scrollToTopBtn.classList.remove("isVisible")
}

最后，要使其工作，首先需要添加 opacity: 0; 到 scrollToTopBtn 类以在页面加载时隐藏按钮。 然后添加类 isVisible 与 opacity: 1; 当页面滚动通过您选择的比率时，按钮。 最后但同样重要的是，添加过渡：所有 250 毫秒的缓入缓出； 为按钮设置动画的 scrollToTopBtn 类。

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}.isVisible {
  opacity: 1;
}

第四步，修复不需要的点击

当滚动到顶部按钮被隐藏时，它仍然可以被点击，这是不应该发生的。 要解决这个问题，请添加指针事件：无； 类 scrollToTopBtn 忽略点击事件并添加指针事件：自动； 类 isVisible 以在按钮可见时将点击事件带回按钮。

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}.isVisible {
  pointer-events: auto;
  opacity: 1;
}

第五步，给页面添加平滑滚动

现在滚动到顶部按钮仍然可以正常工作，您可以通过平滑滚动为您的网站添加漂亮的触感。 为此，只需添加 scroll-behavior: smooth; 到 html 标签。

html {
scroll-behavior: smooth;
}

总结

滚动到顶部按钮是一个简单而有用的功能，可以极大地改善您网站的用户体验。 在本教程中，我向您展示了如何在没有任何库的情况下使用几行代码构建滚动到顶部按钮。