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

Tags: WordPress 返回顶部

分享到：