1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" /> 6 <meta name="description" content="此代码内容为弹性返回顶部JS代码,属于站长常用代码,更多悬浮漂浮代码请访问懒人图库JS代码频道。" /> 7 <title>弹性返回顶部JS代码_懒人图库</title> 8 <SCRIPT type=text/javascript src="js/scrolltop.js"></SCRIPT> 9 <LINK rel=stylesheet type=text/css href="css/lrtk.css"> 10 </head> 11 12 <body style="text-align:center"> 13 <div id="topcontrol" title="Scroll Back to Top" style="DISPLAY: none; position: fixed; bottom: 30px; left: 50%; margin-left: 491px; opacity: 1; cursor: pointer;"> 14 <img src="http://www.paidai.com/images/new/top.jpg" style="width:53px; height:49px"/> 15 </div> 16 <SCRIPT type=text/javascript>goTopEx();</SCRIPT> 17 18 19 <br /><br /><br /><br /><br /><br /><br /> 20 <p>来源:<a href="http://www.thinkzm.com/" target="_blank">Redm赤美广告</a> 代码整理:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库(西西)</a> 感谢:<a href="http://www.nifengla.com/" target="_blank">你疯啦</a></p> 21 <p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p> 22 <p></p> 23 <p><p>超出首屏范围,即会出现TOP按钮,否则自动隐藏。<br /> 24 </p></p> 25 <p></p> 26 27 28 29 </body> 30 </html>
1 // JavaScript Document 2 function goTopEx(){ 3 var obj=document.getElementById("topcontrol"); 4 function getScrollTop(){ 5 return document.documentElement.scrollTop; 6 } 7 function setScrollTop(value){ 8 document.documentElement.scrollTop=value; 9 } 10 window.onscroll=function(){getScrollTop()>10?obj.style.display="":obj.style.display="none";} 11 obj.onclick=function(){ 12 var goTop=setInterval(scrollMove,10); 13 function scrollMove(){ 14 setScrollTop(getScrollTop()/1.1); 15 if(getScrollTop()<1)clearInterval(goTop); 16 } 17 } 18 }
原文:http://www.cnblogs.com/double405/p/5276400.html