洛杉矶MC机房 高速低价18元起

尊云,给你尊贵体验!

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

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿邮箱:hostvps@88.com。

本文实例讲述了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:blockwidth:30pxmargin-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. cursorpointer;  
  16. background-color:#444;  
  17. color:#fff;  
  18. border-radius:5px;  
  19. text-decorationnone;  
  20. font-weight:bold;  
  21. }  
  22. #scroll a:hover {  
  23. background-color:#333;  
  24. color:#669900;  
  25. text-decorationnone;  
  26. font-weight:bold;  


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

 

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

About 贝壳

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本文链接:贝壳主机网 » WordPress增加返回顶部效果的方法

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活