1. When calculating the speed, you must remember to round, because pixels are the smallest unit that the computer can receive, so if it is 299.9px, the computer will think it is 299px, and the computer will not round you.
2. Buffer movement: gradually slow down, and finally stop. The farther away, the faster. That is, speed is proportional to distance. Speed = (target - current) / scaling factor
3. Buffer menu: buffer sidebar scrolling according to the page. Because this is divided by 2, the target value should also be rounded.
Side sliding frame
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Side scroll menu bar</title>
<style>
#div1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
right: 0;bottom: 0;}
</style>
<script>
window.onscroll=function(){
var div1=document.getElementById('div1');
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
//document.documentElement.clientHeight: get the height of the current window, the height of the visual area
// div1.offsetTop: get the height from the top of the div to the top of the whole page
//Div1.offsetheight, get the height of the element
//Scroll: get the height of the scroll
// alert(document.documentElement.clientHeight+'---'+div1.offsetHeigh+'---'+scroll+'---'+div1.style.top);
//div1.style.top = document.documentElement.clientHeight-div1.offsetHeight+scroll+'px';
startMove(parseInt((document.documentElement.clientHeight-div1.offsetHeight)/2+scroll));
}
var time = '';
function startMove(target){
var div1=document.getElementById('div1');
clearInterval(time);
time=setInterval(function(){
var speed = (target-div1.offsetTop)/2;
//For speed, if the speed is to be rounded, so if the speed is greater than 0, round up, less than 0, round down.
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(div1.offsetTop==target){
clearInterval(time);
}else{
div1.style.top=div1.offsetTop+speed+'px';
}
},30);
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
</div>
</body>
</html>Add: the following code only sets the height of 2000 for the body. Although the absolute positioning is set for div1 and bottom is equal to 0, its position is still at the bottom of the current page. When the scroll bar scrolls, its position relative to the page background will not change, but its position relative to the current window will change.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
right: 0;bottom: 0;}
</style>
</head>
<body style="height: 2000px;">
<div id="div1">
</div>
</body>
</html>Buffer motion stop condition
<meta charset="UTF-8">
<title>Buffer motion stop condition</title>
<style>
#div1{width: 100px;height: 100px;background-color: #0000FF;position: absolute;left: 600px;}
#div2{width: 1px;height: 200px;background-color: black;position: absolute;left: 100px;}
#div3{width: 1px;height: 200px;background-color: black;position: absolute;left: 300px;}
</style>
<script>
function startMove(target){
var time='';
clearInterval(time);
var div1 = document.getElementById('div1');
time = setInterval(function(){
var speed=0;
if(div1.offsetLeft<target){
speed=7;
}else{
speed=-7;
}
//If you do not add if condition to judge, the blue div1 block will shake near the solid line.
//The if conditional sentence judges a range, but when it does, it makes its left directly near the real line, that is, the value of target.
if(Math.abs(div1.offsetLeft-target)<=7){
//Turn off the timer, and then just make his left near the solid line, which is the value of target,
clearInterval(time);
//Remember to add px
div1.style.left=target+'px';
}else{
div1.style.left=div1.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<input id='btn2' type="button" value="To 100" onclick="startMove(100)" />
<input id='btn3' type="button" value="To 300" onclick="startMove(300)" />
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>