滚动到顶部按钮对付具有大量内容的网站、无限滚动的页面或具有可能导致内容滚动扩展的小屏幕的移动设备非常有用。
第一步，创建按钮
要创建滚动按钮，请利用带 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;}
总结
滚动到顶部按钮是一个大略而有用的功能，可以极大地改进您网站的用户体验。 在本教程中，我向您展示了如何在没有任何库的情形下利用几行代码构建滚动到顶部按钮。
