#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码在后面
<div>模块1</div> <div>模块2</div> <div>模块3</div> <div>模块4</div> <div>模块5</div> <div>模块6</div> <div>模块7</div> <div>模块8</div> <div>模块9</div> <button>返回顶部</button>
* { padding: 0px; margin: 0px; } div { width: 1200px; height: 300px; margin: 50px auto; font-size: 120px; line-height: 300px; text-align: center; color: #ffffff; background-color: #999999; } button { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; border: 0px; border-radius: 10px; font-size: 24px; line-height: 30px; text-align: center; color: #000; background-color: #c5e4ff; outline: none; cursor: pointer; } button:hover { color: #fff; background-color: #5fb4ff; }
var btn = document.querySelector('button'); var timer;
btn.addEventListener('click', function () { clearInterval(timer); timer = setInterval(function () { if (window.pageYOffset != 0) { window.scroll(0, Math.max(window.pageYOffset - 50, 0)); } else { clearInterval(timer); } }, 10); })
考虑到可能会有连续点击的情况,可能会有点击的时候页面还因为上次点击的没滚动完(上次的计时器还没停止),所以每次点击的时候先停止一下上次的计时器,然后再添加新的计时器
<!DOCTYPE html> <html lang="ch-ZN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现页面滚动返回顶部</title> <style> * { padding: 0px; margin: 0px; } div { width: 1200px; height: 300px; margin: 50px auto; font-size: 120px; line-height: 300px; text-align: center; color: #ffffff; background-color: #999999; } button { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; border: 0px; border-radius: 10px; font-size: 24px; line-height: 30px; text-align: center; color: #000; background-color: #c5e4ff; outline: none; cursor: pointer; } button:hover { color: #fff; background-color: #5fb4ff; } </style> </head> <body> <div>模块1</div> <div>模块2</div> <div>模块3</div> <div>模块4</div> <div>模块5</div> <div>模块6</div> <div>模块7</div> <div>模块8</div> <div>模块9</div> <button>返回顶部</button> <script> var btn = document.querySelector('button'); // 获取元素 var timer; // 用来储存计时器的变量 btn.addEventListener('click', function () { clearInterval(timer); // 先停止上次的计时器(防止连点) timer = setInterval(function () { // 判断是否已经滚动到了顶部 if (window.pageYOffset != 0) { // 如果没到顶部就再移动一点距离(我这里是一次移动了50像素) window.scroll(0, Math.max(window.pageYOffset - 50, 0)); } else { // 如果到顶部了就停止计时器 clearInterval(timer); } }, 10); }) </script> </body> </html>
本文地址:https://blog.csdn.net/ycx60rzvvbj/article/details/107715325
如对本文有疑问, 点击进行留言回复!!
vue源码实战render.js与$nextTick的异步调用
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
网友评论