原生JS中的返回顶部按钮（入门级）
使用原生 JavaScript 的“滚动到顶部”按钮
返回顶部
返回顶部按钮是网站上非常常见的用户体验功能。它的目的是避免用户被迫向上滚动页面，尤其是在移动设备上。在本简短教程中，我们将学习如何使用 CSS 和纯 JavaScript 实现返回顶部按钮。
最简单的实现返回顶部按钮的方法是，在页面顶部放置一个 HTML 元素，并在页面末尾附近添加一个调用该元素的链接：
<div id="scroll-to-top"></div>
<!-- ... -->
<a href="#scroll-to-top"></a>
这段 CSS 代码用于实现平滑滚动：
html {
scroll-behavior: "smooth";
}
这是让页面滚动到顶部的最简单方法（正如Louis Low在评论中指出的那样，我最初的帖子中确实漏掉了这一点。）
结果如下：
无需JavaScript！
使用原生 JavaScript 的“滚动到顶部”按钮
前面的例子虽然可以正常运行，但有一个严重的缺陷：点击该链接后，URL 中会出现锚点#scroll-to-top 。我们可以将锚点改为#home，但即使用户点击返回按钮，它仍然会保留在 URL 历史记录中。
这就是为什么我更喜欢用 JavaScript 来实现的原因😁。而且 JavaScript 还允许更多自定义选项，例如：
- 当用户向下滚动页面 x% 后显示按钮。
- 动画化入口和出口。
按钮
我们创建一个简单的按钮，并给它添加一个类名，scrollToTopBtn这样我们就可以在js中引用它了。
<button class="scrollToTopBtn">TOP</button>
以下是按钮的一些 CSS 属性：
-
position: fixed;将其从页面布局中移除。 -
bottom: 50px;并将right: 50px;其放置在右下角。 -
z-index: 100;较大的 z-index 值能使按钮始终位于所有其他元素之上。 -
display: none;首先用来隐藏它。
检测用户滚动
我们可以通过事件监听器检测用户的滚动操作scroll：
document.addEventListener("scroll", handleScroll);
function handleScroll() {
// do something on scroll
}
显示“滚动到顶部”按钮逻辑
在这个handleScroll函数中，我们将检查是否需要显示或隐藏按钮。我们将使用三个元素属性：
-
clientHeight表示元素在其父元素中可见的部分。
-
scrollHeight表示元素的总高度，包括溢出部分的高度。
溢出部分的高度是指可以滚动的总像素数。换句话说：可滚动高度 = 滚动高度 - 客户端高度
var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
document.documentElement是文档元素。我们使用它而不是，是document因为 scrollHeight 和 clientHeight 是元素的属性。
- scrollTop表示从顶部滚动的像素数，也就是用户实际滚动的像素数。
将 scrollTop 除以 scrollableHeight，我们得到一个介于 0 和 1 之间的比值。0 表示用户没有滚动页面，1 表示用户已滚动到页面底部。这个比值告诉我们用户滚动了多少。
如果我们希望用户滚动 50% 后才显示返回顶部按钮，我们将黄金比例设置为 0.5。然后，通过 if else 语句，使按钮在上方可见，在下方隐藏。
document.addEventListener("scroll", handleScroll);
// get a reference to the button
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
function handleScroll() {
var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var GOLDEN_RATIO = 0.5;
if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO) {
//show button
scrollToTopBtn.style.display = "block";
} else {
//hide button
scrollToTopBtn.style.display = "none";
}
}
这样一来，滚动到顶部按钮就会出现，滚动时则会隐藏。
返回顶部
有很多使用 jQuery 的滚动示例。但如今，使用纯 JavaScript 的 scrollTo 方法可以轻松实现滚动效果：
\\...
scrollToTopBtn.addEventListener("click", scrollToTop);
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
top: 0,表示垂直滚动到 0px。behavior: "smooth"使滚动流畅。- 此外，还有一个
left用于水平滚动的属性。
就这样！以下是最终的js代码：
document.addEventListener("scroll", handleScroll);
// get a reference to our predefined button
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
function handleScroll() {
var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var GOLDEN_RATIO = 0.5;
if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO) {
//show button
scrollToTopBtn.style.display = "block";
} else {
//hide button
scrollToTopBtn.style.display = "none";
}
}
scrollToTopBtn.addEventListener("click", scrollToTop);
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
锵锵🎉🎉🎉！
感谢阅读🥰🥰！！希望这篇文章对你有帮助。
改进之处：
我尽量保持简洁。通常我会切换类而不是显示，以显示过渡动画。
以下是如何让按钮逐渐亮起的方法：
文章来源：https://dev.to/ljcdev/scroll-to-top-button-in-vanilla-js-beginners-2nc