<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //alert(document.documentElement.clientHeight); //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; //alert(document.documentElement.clientHeight); //document.title=oDiv.offsetHeight; //alert(oDiv.offsetHeight); //alert(document.documentElement.scrollTop); //alert(scrollTop); //alert(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2)+scrollTop); } var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); var oTxt=document.getElementById('txt1'); clearInterval(timer); timer=setInterval(function() { var speed=(iTarget-oDiv.offsetTop)/6; //alert(iTarget-oDiv.offsetTop); //alert(iTarget); //alert(speed); speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetHeight==iTarget) { clearInterval(timer); } else { document.title=iTarget ; oTxt.value=oDiv.offsetTop; //oTxt.style.top=oTxt.offsetTop+speed+'px'; oDiv.style.top=oDiv.offsetTop+speed+'px'; //oTxt.style.top=oDiv.offsetTop+speed+'px'; } },30); } </script> </head> <body style="height:2000px;"> <input type="text" id="txt1" style="position:fixed; right:0; top:0";/> <div id="div1"></div> </body> </html>