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