<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
#div1{
height:50px;
width: 30px;
background: brown;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<script>
window.onScroll=function () {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var div1=document.getElementById("div1");
startMove(document.documentElement.clientHeight-div1.offsetHeight+scrollTop);
}
var timer=null;
function startMove(iTarget)
{
var div1=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function () {
var speed=(iTarget-div1.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(div1.offsetTop==iTarget)
clearInterval(timer);
else{
div1.style.top=div1.offsetTop+speed+'px';
}
},30);
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>