WordPress增加返回顶部效果的方法

本文实例讲述了WordPress增加返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：

返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.

第一步:在下面主题文件footer.php底下加上这段代码:

1. <script src="top.js" type="text/javascript" charset="utf-8"></script >  
2. <div id="scroll"><a href="javascript：void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div> 

top.js代码如下:

1. //<![CDATA[  
2. var goto_top_type = -1;  
3. var goto_top_itv = 0;  
4. function goto_top_timer()  
5. {  
6. var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;  
7. var moveby = 15;  
8. y -= Math.ceil(y * moveby / 100);  
9. if (y < 0) {  
10. y = 0;  
11. }  
12. if (goto_top_type == 1) {  
13. document.documentElement.scrollTop = y;  
14. }  
15. else {  
16. document.body.scrollTop = y;  
17. }  
18. if (y == 0) {  
19. clearInterval(goto_top_itv);  
20. goto_top_itv = 0;  
21. }  
22. }  
23. function goto_top()  
24. {  
25. if (goto_top_itv == 0) {  
26. if (document.documentElement && document.documentElement.scrollTop) {  
27. goto_top_type = 1;  
28. }  
29. else if (document.body && document.body.scrollTop) {  
30. goto_top_type = 2;  
31. }  
32. else {  
33. goto_top_type = 0;  
34. }  
35. if (goto_top_type > 0) {  
36. goto_top_itv = setInterval('goto_top_timer()', 50);  
37. }  
38. }  
39. }  
40. //]]> 

第二步:在主题文件style.css文件中加入以下样式:

1. /*返回顶部*/  
2. #scroll {display:block; width:30px; margin-right:-380px;  
3. position:fixed;  
4. right:50%;  
5. top:90%;  
6. _margin-right:-507px;  
7. _position:absolute;  
8. _margin-top:30px;  
9. _top:expression(eval(document.documentElement.scrollTop));  
10. }  
11. #scroll a {  
12. display:block;  
13. float:right;  
14. padding:9px 5px;  
15. cursor: pointer;  
16. background-color:#444;  
17. color:#fff;  
18. border-radius:5px;  
19. text-decoration: none;  
20. font-weight:bold;  
21. }  
22. #scroll a:hover {  
23. background-color:#333;  
24. color:#669900;  
25. text-decoration: none;  
26. font-weight:bold;  
27. } 

这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.

 

希望本文所述对大家的WordPress建站有所帮助。