Effect:
Idea:
First, load onscroll to control the scroll bar. Then write the method of buffering motion. The method of buffering motion is to first calculate the speed of the DIV buffer, round it up, and then perform motion to determine when the end point is reached. Finally return its parameters. Then call this method in onscroll, and calculate the end point and assign it to the parameters of this method.
Code:
Copy the code code as follows:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background: #0000FF;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //Get the moving height
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //Call the parameters, and the parameters inside are the end points of the DIV. That is (visual height - DIV height) / 2 + mobile height
};
var timer = null;
function move(end) {
clearInterval(timer); //First, close the previously opened setInterval;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //Calculate the speed of DIV. The speed of DIV is equal to (end point - offsetTop height) / scaling factor
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //To avoid decimals, round it to an integer
if (oDiv.offsetTop == end) { //When the DIV reaches the end, close setInterval;
clearInterval(timer);
}
else {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //Move the div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>