如何用纯js实现返回页面顶部功能
更新时间：2024年06月21日 08:56:23 作者：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返回页面顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
浅谈javascript的url参数parse和build函数
下面小编就为大家带来一篇浅谈javascript的url参数parse和build函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了小程序如何页面多级来回切换支持滑动和点击操作，文中的实现步骤讲解详细，快跟随小编一起动手尝试一下吧2022-07-07
今天我主要讲3种不同展示的JavaScript树结构菜单，分别是悬浮层树(Tree)、右键菜单树(ContextMenu)和节点树(TreeMenu)，目前都支持无限级层次。2010-05-05
详解ES6 export default 和 import语句中的解构赋值
这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
前一段做音乐和链接保存项目时用到了UserData，现在上线后效果不错，就把UserData的一些用法总结出来，大家一同分享。2010-07-07
这篇文章主要介绍了js实现同一页面多个运动效果的方法,涉及javascript操作页面元素运动效果的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了JavaScript Canvas实现井字棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
VS2008中使用JavaScript调用WebServices
这篇文章主要介绍了VS2008中使用JavaScript调用WebServices,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-01-01
最近需要用到预加载和延迟加载的东东，就参考写了一个。支持跨页面，支持超时设置与依赖设置。2010-05-05
最新评论