<!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+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(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); } var timer=null; function startMove(iTarget) { var oDiv=document.getElementById(‘div1‘); 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 { oDiv.style.top=oDiv.offsetTop+speed+‘px‘; } },30); } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
原文：https://www.cnblogs.com/bedfly/p/12295459.html