来往下看
👇
首先呢先计算一个下
规定在500ms之内完成滚动
速度 = 路程 / 时间(ms) 结果:每1ms需要走的路程
速度 = 路程 / 时间 * 16.6667 结果:每16.6667需要走的路程
路程:st - 1000 时间:500
var v = (st - 200) / 500 * 16.6667; // 速度 每16.6667ms需要走的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 10000px;
/* background-image: linear-gradient(red, yellow, blue, pink, green); */
}
#back {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="back">返回顶部</div>
<script>
var back = document.getElementById('back');
back.onclick = function() {
var st = document.documentElement.scrollTop || document.body.scrollTop;
// 规定在500ms之内完成滚动
// 速度 = 路程 / 时间(ms) 结果:每1ms需要走的路程
// 速度 = 路程 / 时间 * 16.6667 结果:每16.6667需要走的路程
// 路程:st - 1000 时间:500
var v = (st - 200) / 500 * 16.6667; // 速度 每16.6667ms需要走的距离
var timer = setInterval(() => {
st -= v;
document.documentElement.scrollTop = st;
document.body.scrollTop = st;
if (st <= 1000) {
clearInterval(timer);
}
}, 16.6667);
}
</script>
</body>
</html>