JavaScript实现返回顶部按钮

这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码，供大家参考，具体内容如下

1.先搭架子

 a { text-decoration: none; } body { height: 5000px; } .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12px; box-sizing: border-box; cursor: pointer; color: #000; /* 先隐藏按钮 */ /*display: none;*/ }

 返回
顶部

2.逻辑部分

当鼠标点击“返回顶部”按钮时，则会以每50毫秒的周期以一定“速度”返回到顶部，回到顶部之后则要进行清除，否则将出现只要一往下拉页面就会自动返回顶部的现象
在这里就要用到两个方法一个是 setInterval，一个是clearInterval，前者是设置定时器，后者为清除定时器
在这里要注意一点的是，为了不引起冲突，在设置定时器之前要进行“设表先关”
最后为了增加用户的体验感，我们需要设计成，当前如果是在顶部时，那么“返回顶部”按钮就会自动隐藏；当前如果不在顶部时，“返回顶部”按钮就显示

 .backtotop { /* 先隐藏按钮 */ display: none; }

 (function() { // 1.拿到需要操作的元素 let oBackBtn = document.querySelector("#backtotop"); // 2.监听网页的滚动 window.onscroll = function() { // 获取滚动出去的距离 let offsetY = getPageScroll().y; // console.log(offsetY); // 判断是否需要显示回滚按钮 if (offsetY >= 200) { oBackBtn.style.display = "block"; } else { oBackBtn.style.display = "none"; } } let timerId = null; // 3.监听回滚按钮的点击 oBackBtn.onclick = function() { //设表先关，防止定时器冲突 clearInterval(timerId); //设置定时器 timerId = setInterval(function() { let begin = getPageScroll().y; //当前位置 let target = 0; //目标位置 let step = (target - begin) * 0.3; begin += step; //判断是否结束 if (Math.abs(Math.floor(step)) <= 1) { //清除定时器 clearInterval(timerId); // window.scrollTo(x, y); // x表示让网页在水平方向滚动到什么位置 // y表示让网页在垂直方向滚动到什么位置 window.scrollTo(0, 0); return; } window.scrollTo(0, begin); }, 50); }; function getPageScroll() { let x, y; if (window.pageXOffset) { x = window.pageXOffset; y = window.pageYOffset; } else if (document.compatMode === "BackCompat") { x = document.body.scrollLeft; y = document.body.scrollTop; } else { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } return { x: x, y: y } } })();