如何用纯js实现返回页面顶部功能
作者：Rattenking
页面返回顶部是在Web中常见的效果,在一个很长的页面中,页面返回顶部按钮可以方便用户回到页面的顶部,增强用户体验,这篇文章主要给大家介绍了关于如何用纯js实现返回页面顶部功能的相关资料,需要的朋友可以参考下
1. 需求场景
点击页面中的浮标，页面自动返回顶部。
2. 需求实现分析
- 直接使用 body 或者 documentElement 的 scrollTop 属性，直接设置为 0；就能返回页面顶部；
- 使用 window.scrollTo 方法，实现返回页面顶部。
3. 方案一：直接返回顶部
3.1 代码逻辑分析
- 获取返回顶部按钮;
- 当页面滚动时显示或隐藏返回顶部按钮;
2.1 获取当前滚动的位置;
2.2 判断是否超过设置的显示距离，超过就显示，否则就隐藏; - 滚动到顶部。
3.2 代码实现
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() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
}
3.3 总结
- 由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！
4. 方案二：平滑滚动
4.1 代码实现分析
- 获取返回顶部按钮；
- 当页面滚动时显示或隐藏返回顶部按钮；
2.1 获取当前滚动的位置；
2.2 判断是否超过设置的显示距离，超过就显示，否则就隐藏； - 平滑滚动到顶部；
3.1 获取当前滚动的位置；
3.2 如果当前不在顶部，则开始滚动动画；
3.3 到达指定位置，执行回调函数； - 滚动函数；
4.1 获取当前滚动的位置；
4.2 如果当前不在顶部，则开始滚动动画；
4.3 控制滚动速度。
4.2 代码实现
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)); // 控制滚动速度
}
}
}
4.3 总结
- 实现了平滑滚动到顶部；
- 在滚动完成后执行回调函数。
5. 注意
- 使用CSS来添加一些过渡效果会让滚动更加平滑，并增强用户体验。可以添加以下CSS代码：
html {
scroll-behavior: smooth;
}总结
到此这篇关于如何用纯js实现返回页面顶部功能的文章就介绍到这了,更多相关js返回页面顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！