本文详细介绍如何使用JavaScript实现网页返回顶部功能。通过构建HTML锚点与CSS样式，利用window.onscroll监听滚动距离，结合setInterval实现平滑滚动效果，并处理定时器清除与按钮显隐逻辑，提升用户体验。
JavaScript 实现返回顶部按钮：HTML结构与滚动逻辑详解
本文分享了一段使用JavaScript实现网页返回顶部按钮的完整代码示例，供读者参考学习。
页面结构搭建
首先进行页面结构的搭建。
a {
text-decoration: none;
}
body {
height: 5000px;
}
.backtotop {
position: fixed;
bottom: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #ccc;
font-size: 20px;
text-align: center;
padding-top: 12px;
box-sizing: border-box;
cursor: pointer;
color: #000;
/* 先隐藏按钮 */
/*display: none;*/
}
<a href="javascript:;" class="backtotop" id="backtotop">返回<br>顶部</a>
核心逻辑实现
接下来处理核心逻辑部分。
当用户点击“返回顶部”按钮时，程序会以50毫秒为周期，控制页面以一定的速度滚动至顶部。到达顶部后必须清除定时器，否则会导致页面在向下滚动时自动跳回顶部的异常现象。实现该功能主要依赖两个方法：setInterval用于设置定时器，clearInterval用于清除定时器。需要注意的是，在开启新定时器前应先关闭可能存在的旧定时器，以避免冲突。此外，为了优化用户体验，需设计按钮的显隐逻辑：当页面位于顶部时，按钮自动隐藏；当页面滚动离开顶部时，按钮显示。
.backtotop {
/* 先隐藏按钮 */
display: none;
}
(function() {
// 1.拿到需要操作的元素
let oBackBtn = document.querySelector("#backtotop");
// 2.监听网页的滚动
window.onscroll = function() {
// 获取滚动出去的距离
let offsetY = getPageScroll().y;
// console.log(offsetY);
// 判断是否需要显示回滚按钮
if (offsetY >= 200) {
oBackBtn.style.display = "block";
} else {
oBackBtn.style.display = "none";
}
}
let timerId = null;
// 3.监听回滚按钮的点击
oBackBtn.onclick = function() {
//设表先关，防止定时器冲突
clearInterval(timerId);
//设置定时器
timerId = setInterval(function() {
let begin = getPageScroll().y; //当前位置
let target = 0; //目标位置
let step = (target - begin) * 0.3;
begin += step;
//判断是否结束
if (Math.abs(Math.floor(step)) <= 1) {
//清除定时器
clearInterval(timerId);
// window.scrollTo(x, y);
// x表示让网页在水平方向滚动到什么位置
// y表示让网页在垂直方向滚动到什么位置
window.scrollTo(0, 0);
return;
}
window.scrollTo(0, begin);
}, 50);
};
function getPageScroll() {
let x, y;
if (window.pageXOffset) {
x = window.pageXOffset;
y = window.pageYOffset;
} else if (document.compatMode === "BackCompat") {
x = document.body.scrollLeft;
y = document.body.scrollTop;
} else {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return {
x: x,
y: y
}
}
})();
以上内容即为本文的全部介绍，希望能为读者的学习提供有益帮助，欢迎继续支持本站。