代码中使用了两种方式,方式一非常简单,方式二可能才是我们实际项目中会用到到的,以及方式二的实现原理更值得我们取学习,当然代码只是供学习使用,实际项目中还是需要根据自己的项目需要灵活应用.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 95%;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//瞬间滚动到顶部
/*$('#to_top').click(function () {
/!*'html,body' 为了兼容IE和chrome*!/
$('html,body').scrollTop(0)
})*/
//平滑滚到顶部
$('#to_top').click(function () {
var $page=$('html,body');
//先算出滚动的总距离,为了兼容IE和chrome*!/
var distance=$(document.documentElement).scrollTop()+$(document.body).scrollTop()
//alert(distance)
//滚动的总时间
var time=500;
//间隔时间
var intervalTime=10;
//把总距离分成若干个小的段(就像打游戏或者看电影时的每一帧)
var itemDistance=distance/(time/intervalTime);
//使用循环定时器不断滚动
var intervalId=setInterval(function () {
distance-=itemDistance
//达到顶部,停止滚动
if (distance<=0){//滚动中的小数相减可能会为负
distance=0;//修正
//清楚定时器
clearInterval(intervalId)
}
$page.scrollTop(distance)
},intervalTime)
})
</script>