弹性返回顶部
相信"返回顶部"这个效果已经随处可见了,刚刚学了BOM,加上之前有学运动,就随手做了一个弹性的,
好了,先贴代码吧。
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=utf-8" /> 5 <title>返回顶部弹性效果</title> 6 <!--在此就不考虑IE6了,完全兼容除IE6以外的浏览器(IE7——10,Chrome,FireFox,oparo,safari)--> 7 8 <style> 9 body{ height:1200px;} 10 #btn{ width:30px; height:100px; background:#999999; 11 position:fixed; right:60px; bottom:80px; line-height:20px; 12 text-align:center;cursor:pointer; font-size:16px; display:none;} 13 </style> 14 <script> 15 16 function Buffe(obj)//弹性方法 17 { 18 var timer=null; 19 timer=setInterval(function(){ 20 var iSpeed=document[obj].scrollTop/5; 21 if(document[obj].scrollTop==0) 22 { 23 clearInterval(timer); 24 } 25 else 26 { 27 document[obj].scrollTop=document[obj].scrollTop-iSpeed; 28 } 29 30 31 },30); 32 } 33 34 window.onload=function() 35 { 36 37 oBtn=document.getElementById('btn'); 38 39 oBtn.onclick=function (){ 40 if(document.documentElement.scrollTop) 41 { 42 Buffe('documentElement'); 43 } 44 else 45 { 46 Buffe('body'); 47 } 48 49 returnTop(); 50 } 51 52 window.onscroll=returnTop; 53 54 function returnTop(){ 55 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 56 if(scrollTop==0){ 57 oBtn.style.display="none"; 58 59 } 60 61 62 else{ 63 oBtn.style.display="block"; 64 65 } 66 67 } 68 69 }; 70 71 </script> 72 </head> 73 74 <body> 75 <div id="btn">返回顶部</div> 76 </body> 77 </html>
之所以不考虑IE6,是想让IE6的用户主动舍弃IE6,这样才能促进IT的发展。
而且新浪微博它就没兼容IE6。
如果非要兼容的话,也不是不可,要兼容IE6版本的可以联系我。