javascript中返回顶部按钮的实现

这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码,非常不错,这里推荐给小伙伴们

炫酷的返回顶部功能

js核心代码

1. window.onscroll = function(){  
2. var t = document.documentElement.scrollTop || document.body.scrollTop;  
3. var top_div = document.getElementById( "go" );  
4. if( t >= 300 ) {  
5. top_div.style.display = "block";  
6. } else {  
7. top_div.style.display = "none";  
8. }  
9. }  
10.  
11.  
12. var ptt=20; 
13. function pageScroll() { 
14.  
15. document.getElementById('flypig').style.display='block'; 
16. window.scrollBy(0,-10); //每次上升10px 
17.  
18.  
19.  
20. if(document.body.scrollTop==0) {  
21. document.getElementById('flypig').style.marginBottom=ptt+'px'; 
22. ptt=ptt+10;  
23. } 
24. scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 
25.  
26. if(ptt>=1000){ 
27. ptt=0; 
28. document.getElementById('flypig').style.marginBottom=20+'px'; 
29. document.getElementById('flypig').style.display='none'; 
30. clearTimeout(scrolldelay); 
31. } 
32. //pageScroll ends 
33. }  

html

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>返回顶部按钮的实现</title> 
5. <meta charset="utf-8" /> 
6. <style> 
7. body{ 
8. margin:0px; 
9. } 
10. #flypig{ 
11. display: none;  
12. float: left;  
13. position: fixed;  
14. bottom: 20px;  
15. margin-left: 75%;  
16. cursor: pointer;  
17. margin-bottom: 20px; 
18. } 
19. #go{ 
20. display: block;  
21. float: left;  
22. position: fixed;  
23. bottom: 10px;  
24. margin-left: 75%;  
25. cursor: pointer; 
26. } 
27. </style> 
28. <script> 
29.  
30. window.onscroll = function(){  
31. var t = document.documentElement.scrollTop || document.body.scrollTop;  
32. var top_div = document.getElementById( "go" );  
33. if( t >= 300 ) {  
34. top_div.style.display = "block";  
35. } else {  
36. top_div.style.display = "none";  
37. }  
38. }  
39.  
40. var ptt=20; 
41. function pageScroll() { 
42.  
43. document.getElementById('flypig').style.display='block'; 
44. window.scrollBy(0,-10); //每次上升10px 
45.  
46. if(document.body.scrollTop==0) {  
47. document.getElementById('flypig').style.marginBottom=ptt+'px'; 
48. ptt=ptt+10;  
49. } 
50. scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 
51.  
52. if(ptt>=1000){ 
53. ptt=0; 
54. document.getElementById('flypig').style.marginBottom=20+'px'; 
55. document.getElementById('flypig').style.display='none'; 
56. clearTimeout(scrolldelay); 
57. } 
58. //pageScroll ends 
59. }  
60.  
61. </script> 
62. </head> 
63. <body> 
64. <br /> 
65. <br /> 
66. <br /> 
67. <br /> 
68. <br /> 
69. <br /> 
70. <br /> 
71. <br /> 
72. <br /> 
73. <br /> 
74. <br /> 
75. <br /> 
76. <br /> 
77. <br /> 
78. <h1 style="text-align:center;">请往下滑</h1> 
79. <br /> 
80. <br /> 
81. <br /> 
82. <br /> 
83. <br /> 
84. <br /> 
85. <br /> 
86. <br /> 
87. <br /><br /> 
88. <br /> 
89. <br /> 
90. <br /> 
91. <br /><br /> 
92. <br /> 
93. <br /> 
94. <br /> 
95. <br /><br /> 
96. <br /> 
97. <br /> 
98. <br /> 
99. <br /><br /> 
100. <br /> 
101. <br /> 
102. <br /> 
103. <br /> 
104. <br /> 
105. <br /> 
106. <br /> 
107. <br /> 
108. <br /> 
109. <br /> 
110. <br /> 
111. <br /> 
112. <br /> 
113. <br /> 
114. <br /> 
115. <br /> 
116. <br /> 
117. <br /> 
118. <br /> 
119. <br /> 
120. <br /> 
121. <br /> 
122. <br /> 
123. <br /> 
124. <br /> 
125. <br /> 
126. <br /> 
127. <br /> 
128. <br /> 
129. <br /> 
130. <br /> 
131. <br /> 
132. <br /> 
133. <br /> 
134. <br /> 
135. <br /> 
136. <br /> 
137. <br /> 
138. <br /> 
139. <br /> 
140. <br /> 
141. <br /> 
142. <br /> 
143. <br /> 
144. <br /> 
145. <br /> 
146. <br /> 
147. <br /> 
148. <br /> 
149. <br /> 
150. <br /> 
151. <br /> 
152. <br /> 
153. <br /> 
154. <br /> 
155. <br /> 
156. <br /> 
157. <br /> 
158. <br /> 
159. <br /> 
160. <br /> 
161. <br /><!--让你的页面足够的长--> 
162. <div style="display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;" id="flypig"> 
163. <img src="/wp-content/themes/Jakesoft/images/flypig.gif"> </div> 
164. <div style="display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;" id="go" onclick="pageScroll()">返回顶部</div></html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。