js实现页面滚动返回顶部


许多网站的右下角都有一个可以使页面返回顶部的按钮
例如这些网站:

js实现页面滚动返回顶部
js实现页面滚动返回顶部
js实现页面滚动返回顶部

返回顶部我们可以用锚点链接来实现,但是锚点链接它突然闪到页面顶部有点不太好看
如果页面是滚动着回到顶部的话会好看很多
那么,开始今天的正题

#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码在后面

先搞几个盒子和一个用来添加点击事件的按钮

<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;
}

大概长这样:

js实现页面滚动返回顶部

然后开始js部分
首先要获取按钮元素

var btn = document.querySelector('button');
var timer;

然后如果要页面滚动着回到顶部的话我们需要一个计时器让页面每次向上移动一点,然后每秒多移动几次,这样就有滚动着回到顶部的效果了,然后回到顶部之后我们需要让计时器停下,所以我们需要事先准备一个储存计时器的对象(上面的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);
})

考虑到可能会有连续点击的情况,可能会有点击的时候页面还因为上次点击的没滚动完(上次的计时器还没停止),所以每次点击的时候先停止一下上次的计时器,然后再添加新的计时器

计时器执行的函数也很简单
每次先判断一下页面是否已经滚动到顶部,即页面相对顶部滚动的距离(window.pageYOffset)是否为0,如果是就停止计时器,如果不是就继续滚动,每次滚动就是让页面相对顶部的距离变小一些(用window.scroll()设置页面相对顶部的距离),如果变之后比0还小就变到0

这次的运行效果就不演示了,录gif图有点麻烦,大家自己试吧
完整带注释的代码如下:

<!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://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

js实现页面滚动返回顶部

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » js实现页面滚动返回顶部
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏