如何用纯js实现返回页面顶部功能
function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
// 获取返回顶部按钮
let backToTopButton = document.getElementById(elem);
// 当页面滚动时显示或隐藏返回顶部按钮
window.onscroll = function() {
// 获取当前滚动的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否超过设置的显示距离,超过就显示,否则就隐藏
if (currentScroll > showDistance) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};
// 平滑滚动到顶部
backToTopButton.addEventListener("click", function() {
// 获取当前滚动的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 如果当前不在顶部,则开始滚动动画
if (currentScroll > top) {
window.requestAnimationFrame(smoothScroll); // 运行动画
} else {
// 到达指定位置,执行回调函数
callback && callback();
}
});
// 滚动函数
function smoothScroll() {
// 获取当前滚动的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 如果当前不在顶部,则开始滚动动画
if (currentScroll > top) {
window.requestAnimationFrame(smoothScroll);
window.scrollTo(0, currentScroll - (currentScroll / speed)); // 控制滚动速度
}
}
}