如何用纯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返回页面顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点2013-03-03
JavaScript语言有一个机制：在解析时，能够在一句话后面自动插入一个分号，用来修改语句末尾遗漏的分号分隔符。然而，由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突，即所有空格符都被忽略，因此程序可以利用空格格式化代码2015-11-11
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下2017-10-10
eval(function(p,a,c,k,e,d)系列解密javascript程序
在网上下载源代码时，很可能发现代码里的JS脚本看不懂，这是由于JS加密造成的。如果你发现JS是以eval(function(p,a,c,k,e,r){e=function(c)开头的，看到这个页面你就可以解决他2007-04-04
不错的获取div高度的代码，主要是方便测试一些信息，用到了javascript的offsetHeight属性2008-08-08
js 与或运算符 || && 妙用，可用于精简代码，降低程序的可读性。2009-12-12
这篇文章主要介绍了highcharts.js数据绑定方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11![PPK 谈 JavaScript 的 this 关键字 [翻译]](//img.jbzj.com/images/xgimg/bcimg7.png)
PPK 谈 JavaScript 的 this 关键字 [翻译]
在 JavaScript 中 this 是最强的关键字之一。这篇贴文就是要告诉你如何用好 this。2009-09-09
本文通过代码示例给大家展示了如何让javascript只执行一次，如何实现这种功能呢？通过下面这段就可以轻松搞定了。2016-07-07
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
这篇文章主要介绍了详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
![PPK 谈 JavaScript 的 this 关键字 [翻译]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论