<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #div1{ width: 100px; height: 100px; background-color: #ccc; position: absolute; right: 0; } </style> <script> window.onscroll=function(){ var oDiv = document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop; startMove(parseInt(t)); } var timer=null; function startMove(iTarget){ var oDiv = document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var iSpeed=(iTarget-oDiv.offsetTop)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(oDiv.offsetTop==iTarget){ clearInterval(timer); } else{ oDiv.style.top=oDiv.offsetTop+iSpeed+'px'; } },30); } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>