JavaScript平滑返回顶部代码
以下是一个简单的JavaScript平滑返回顶部代码:
// 获取返回顶部按钮
var topButton = document.getElementById("topButton");
// 当页面滚动时显示或隐藏返回顶部按钮
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
};
// 当点击返回顶部按钮时平滑滚动到顶部
topButton.onclick = function() {
// 获取当前滚动位置
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if (pos > 0) {
window.scrollTo(0, pos - 20); // 每次滚动20像素
} else {
window.clearInterval(scrollToTop);
}
}, 10);
};
要使用此代码,请将其添加到页面的JavaScript文件或标记中,并将“topButton”替换为您页面上实际的返回顶部按钮的ID。
原文地址: https://www.cveoy.top/t/topic/6QN 著作权归作者所有。请勿转载和采集!