今天讲个十分常用的案例:点击回到顶部按钮,无论当前处于页面哪个部分都将回到顶部
直接看案例:采用距离间隔停顿,定时器循环的做法,达到平缓回到顶部做法,而不是瞬间回到顶部
<!DOCTYPE html>
<html lang="en">
<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: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$('#to_top').click(function () {
// 瞬间滚到顶部
//$('html,body').scrollTop(0)
// 平滑滚到顶部
// 总距离
var $page = $('html,body')
var distance = $('html').scrollTop() + $('body').scrollTop()
// 总时间
var time = 500
// 间隔时间
var intervalTime = 25
var itemDistance = distance/(time/intervalTime)
// 使用循环定时器不断滚动
var intervalId = setInterval(function () {
distance -= itemDistance
// 到达顶部, 停止定时器
if(distance<=0) {
distance = 0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
}, intervalTime)
})
</script>
</body>
</html>
总结:主要是分割思想和定时器的应用,判断到达顶部的时候停止定时器,熟能生巧