1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 100px; height: 150px;background-color:red;position: absolute; 8 right:0;bottom: 0;} 9 10 </style> 11 <script> 12 window.onload=window.onscroll=function(){ 13 var oDiv=document.getElementById('div1'); 14 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 15 16 // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetLeft+scrollTop)/2+'px'; 17 18 startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop)); 19 } 20 21 var timer=null; 22 function startMove(iTarget){ 23 var oDiv=document.getElementById('div1'); 24 25 clearInterval(timer); 26 timer=setInterval(function(){ 27 var speed=(iTarget-oDiv.offsetTop)/4; 28 speed=speed>0?Math.ceil(speed):Math.floor(speed); 29 if(oDiv.offsetTop==iTarget){ 30 clearInterval(timer); 31 } 32 else{ 33 document.title=oDiv.offsetTop; 34 document.getElementById('txt1').value=oDiv.offsetTop; 35 oDiv.style.top=oDiv.offsetTop+speed+'px'; 36 } 37 },30) 38 } 39 </script> 40 </head> 41 <body style="height: 2000px;"> 42 <input type="text" id="txt1" style="position: fixed;right: 0; top: 0;" /> 43 <div id="div1"> 44 </div> 45 </body> 46 </html>