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博客中的所有页面都会有返回顶部效果了。