js滚动到顶部底部代码

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset=UTF-8>  
  5.     <title>SCROLL</title>  
  6.     <style type="text/css">  
  7.     </style>  
  8.     <script type="text/javascript">  
  9.         var goToWhere = function (where)  
  10.         {  
  11.             var me = this;  
  12.             me.site = [];  
  13.             me.sleep = me.sleep ? me.sleep : 16;  
  14.             me.fx = me.fx ? me.fx : 6;  
  15.             clearInterval (me.interval);  
  16.             var dh = document.documentElement.scrollHeight || document.body.scrollHeight;  
  17.             var height = !!where ? dh : 0;  
  18.             me.interval = setInterval (function ()  
  19.             {  
  20.                 var top = document.documentElement.scrollTop || document.body.scrollTop;  
  21.                 var speed = (height - top) / me.fx;  
  22.                 if (speed === me.site[0])  
  23.                 {  
  24.                     window.scrollTo (0, height);  
  25.                     clearInterval (me.interval);  
  26.                 }  
  27.                 window.scrollBy (0, speed);  
  28.                 me.site.unshift (speed);  
  29.             }, me.sleep);  
  30.         };  
  31.     </script>  
  32. </head>  
  33. <body>  
  34. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>  
  35. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>  
  36. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>  
  37. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>  
  38. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>  
  39. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>  
  40. <div  onclick="goToWhere(0)"  
  41.      style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>  
  42. <div  onclick="goToWhere(1)"  
  43.      style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>  
  44. </body>  
  45. </html> 
posted @ 2017-02-28 09:59  疯子110  阅读(1594)  评论(0)  编辑  收藏  举报