您现在的位置:爱折腾>> web>>正文内容

js回到顶部动画

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>
  7.         #goTop{  
  8.             display:none;  
  9.             position:fixed;  
  10.             bottom:20px;  
  11.             background:url(http://cdn.w3cfuns.com/resource/images/scrolltop.png) no-repeat 0 0;  
  12.             width:34px;  
  13.             height:34px;  
  14.             cursor:pointer;  
  15.             right:20px;  
  16.         }  
  17.     </style>  
  18.     <script>  
  19.         window.onload=function(){  
  20.             var timer=null;  
  21.             var goTop=document.getElementById("goTop");  
  22.             goTop.onclick=function(){  
  23.                 timer=setInterval(function(){  
  24.                     var top=document.body.scrollTop+document.documentElement.scrollTop;  
  25.                     var speed=top/5;  
  26.                     if(document.body.scrollTop){  
  27.                         document.body.scrollTop-=speed;  
  28.                     }  
  29.                     else{  
  30.                         document.documentElement.scrollTop-=speed;  
  31.                     }  
  32.                     if(top==0){  
  33.                         clearInterval(timer);  
  34.                     }  
  35.                 },30);  
  36.             };  
  37.             window.onscroll=function(){  
  38.                 if(document.body.scrollTop+document.documentElement.scrollTop>=500){  
  39.                     goTop.style.display="block";  
  40.                 }  
  41.                 else{  
  42.                     goTop.style.display="none";  
  43.                 }  
  44.             };  
  45.         };  
  46.     </script>  
  47. </head>  
  48. <body>  
  49.     <p>123</p><br/>  
  50.     <p>123</p><br/>  
  51.     <p>123</p><br/>  
  52.     <p>123</p><br/>  
  53.     <p>123</p><br/>  
  54.     <p>123</p><br/>  
  55.     <p>123</p><br/>  
  56.     <p>123</p><br/>  
  57.     <p>123</p><br/>  
  58.     <p>123</p><br/>  
  59.     <p>123</p><br/>  
  60.     <p>123</p><br/>  
  61.     <p>123</p><br/>  
  62.     <p>123</p><br/>  
  63.     <p>123</p><br/>  
  64.     <p>123</p><br/>  
  65.     <p>123</p><br/>  
  66.     <p>123</p><br/>  
  67.     <p>123</p><br/>  
  68.     <p>123</p><br/>  
  69.     <p>123</p><br/>  
  70.     <p>123</p><br/>  
  71.     <p>123</p><br/>  
  72.     <p>123</p><br/>  
  73.     <p>123</p><br/>  
  74.     <p>123</p><br/>  
  75.     <p>123</p><br/>  
  76.     <p>123</p><br/>  
  77.     <p>123</p><br/>  
  78.     <p>123</p><br/>  
  79.     <p>123</p><br/>  
  80.     <p>123</p><br/>  
  81.     <p>123</p><br/>  
  82.     <p>123</p><br/>  
  83.     <p>123</p><br/>  
  84.     <p>123</p><br/>  
  85.     <p>123</p><br/>  
  86.     <p>123</p><br/>  
  87.     <p>123</p><br/>  
  88.     <p>123</p><br/>  
  89.     <p>123</p><br/>  
  90.     <p>123</p><br/>  
  91.     <p>123</p><br/>  
  92.     <p>123</p><br/>  
  93.     <p>123</p><br/>  
  94.     <p>123</p><br/>  
  95.     <span id="goTop"></span>  
  96. </body>  
  97. </html> 

相关文章