1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/CSS"> 7 *{ margin:0; padding:0;} 8 body{ height:2000px;} 9 #box{ width:40px; height:40px; display:none; position:fixed; right:30px; bottom:30px; background:#f00;}10 </style>11 <script type="text/Javascript">12 window.onload=function(){13 var oBox=document.getElementById("box");14 var clientHeight=document.documentElement.clientHeight;15 var timer=null;16 var onOff=true;17 18 window.onscroll=function(){19 var osTop=document.documentElement.scrollTop || document.body.scrollTop;20 21 if(osTop>=clientHeight){22 oBox.style.display='block';23 }else{24 oBox.style.display='none';25 };26 27 if(!onOff){28 clearInterval(timer);29 };30 onOff=false;31 };32 33 oBox.onclick=function(){34 35 timer=setInterval(function(){36 var osTop=document.documentElement.scrollTop || document.body.scrollTop;37 var iSpeed= Math.floor(-osTop/6);38 var i=document.documentElement.scrollTop = document.body.scrollTop = osTop + iSpeed;39 40 onOff=true;41 if(osTop ==0){42 clearInterval(timer);43 }44 },30);45 };46 };47 </script>48 </head>49 50 <body>51 <div id="box"></div>52 </body>53 </html>
新闻热点
疑难解答
