代碼中使用了兩種方式,方式一非常簡單,方式二可能纔是我們實際項目中會用到到的,以及方式二的實現原理更值得我們取學習,當然代碼只是供學習使用,實際項目中還是需要根據自己的項目需要靈活應用.
<!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>