首页 > 上网技巧 > 电脑小技巧 > 返回顶部js代码 慢慢滑动效果

返回顶部js代码 慢慢滑动效果

时间:2014-08-18 10:30 作者:QQ地带 我要评论

以下代码,保存运行吧。其他的自己修改。

 

 

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. var currentPosition,timer;  
  5. function GoTop(){  
  6. timer=setInterval("runToTop()",1);  
  7. }  
  8. function runToTop(){  
  9. currentPosition=document.documentElement.scrollTop || document.body.scrollTop; 
  10. currentPosition-=10;  
  11. if(currentPosition>0)  
  12. {  
  13. window.scrollTo(0,currentPosition);  
  14. }  
  15. else  
  16. {  
  17. window.scrollTo(0,0);  
  18. clearInterval(timer);  
  19. }  
  20. }  
  21. </script>  
  22. <style type="text/css">  
  23. </style>  
  24. </head>  
  25. <body>  
  26. <div>来自QQ地带 www.oicqzone.com</div> 
  27. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  28. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  29. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  30. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  31. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  32. <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;"></div>  
  33. <div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回顶部</div>  
  34. <script>  
  35. window.scrollTo(0,document.body.scrollHeight);  
  36. </script>  
  37. </body>  
  38. </html>  

标签: JS
顶一下
(3)
100%
踩一下
(0)
0%

Google提供的广告