js实现漂浮回顶部按钮实例

这篇文章主要介绍了js实现漂浮回顶部按钮的方法,实例分析了javascript实现返回顶部功能的样式与动态实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现漂浮回顶部按钮的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>漂浮回顶部按钮</title> 
7. <style> 
8. body{ 
9. height:2000px; 
10. } 
11. .rTop{ 
12. width:100px; height:25px; 
13. text-align:center; font-size:small; 
14. line-height:25px; border:1px solid #999; 
15. position:fixed; right:0; bottom:0; 
16. border-bottom-color:#333;  
17. border-right-color:#333; margin:5px; 
18. cursor:pointer; display:none 
19. } 
20. </style> 
21. <script> 
22. <!--拖动滚动条或滚动鼠标轮--> 
23. window.onscroll=function(){ 
24. if(document.body.scrollTop||document.documentElement.scrollTop>0){ 
25. document.getElementById('rTop').style.display="block" 
26. }else{ 
27. document.getElementById('rTop').style.display="none" 
28. } 
29. } 
30. <!--点击“回到顶部”按钮--> 
31. function toTop(){ 
32. window.scrollTo('0','0'); 
33. document.getElementById('rTop').style.display="none" 
34. } 
35. </script> 
36. </head> 
37. <body> 
38. <div class="rTop" id="rTop" onClick="toTop()">返回顶部</div> 
39. <h1>顶部</h1> 
40. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
41. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
42. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
43. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
44. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
45. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
46. <h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p> 
47. <h1>底部</h1> 
48. </body> 
49. </html> 

希望本文所述对大家的javascript程序设计有所帮助。