<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{margin: 0;padding:0;position: relative;background: #008000;height: 5000px;}
#box{width: 200px;height: 300px;background: yellow;position: absolute;left: 0;top: 200px;}
</style>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box")
var boxT = box.offsetTop;
var begin = 0,end = 0,timer = null;
window.onscroll=function(){
clearInterval(timer);
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT)
end = boxT + scrollT
// console.log(end)
timer = setInterval(function(){
begin = begin+(end - begin)/8;
box.style.top = begin + "px";
if(Math.random(begin)===end){
clearInterval(timer);
}
},20)
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{margin: 0;padding:0;position: relative;background: #008000;height: 5000px;}
#box{width: 200px;height: 300px;background: yellow;position: absolute;left: 0;top: 200px;}
</style>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box")
var boxT = box.offsetTop;
var begin = 0,end = 0,timer = null;
window.onscroll=function(){
clearInterval(timer);
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT)
end = boxT + scrollT
// console.log(end)
timer = setInterval(function(){
begin = begin+(end - begin)/8;
box.style.top = begin + "px";
if(Math.random(begin)===end){
clearInterval(timer);
}
},20)
}
</script>
</body>
</html>