使用AI生成的js平滑返回顶部教程代码
1天前
好的，根据你的需求，我将提供一个 JavaScript 函数，它可以平滑地滚动到页面顶部，并且当页面滚动到一定距离时显示按钮，当滚动到顶部时隐藏按钮。以下是实现这个功能的代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑返回顶部</title>
<style>
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#back-to-top.show {
display: block;
}
</style>
</head>
<body>
<button id="back-to-top" onclick="scrollToTop()">返回顶部</button>
<script>
function scrollToTop() {
const scrollToTopBtn = document.getElementById("back-to-top");
const scrollStep = -window.scrollY / (500 / 15);
const scrollInterval = setInterval(() => {
if (window.scrollY!== 0) {
window.scrollBy(0, scrollStep);
} else {
clearInterval(scrollInterval);
}
}, 15);
}
window.addEventListener("scroll", () => {
const scrollToTopBtn = document.getElementById("back-to-top");
if (window.scrollY > 300) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
});
</script>
</body>
</html>
在这个代码中，我们首先定义了一个 scrollToTop 函数，它会平滑地滚动到页面顶部。然后，我们使用 window.addEventListener("scroll",...) 来监听页面的滚动事件。当页面滚动到距离顶部 300 像素时，我们会显示 "返回顶部" 按钮；当页面滚动到顶部时，我们会隐藏这个按钮。
请注意，这个代码需要在支持 JavaScript 的现代浏览器中运行。
none
0 赞
or 打赏
喜欢就打赏一点
下一篇
没有了
