优站互动 - 专业精品源码下载论坛,优秀的网站模板分享社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 54|回复: 0

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

[复制链接]
  • TA的每日心情
    擦汗
    2016-7-1 10:43
  • 签到天数: 1 天

    [LV.1]初来乍到

    244

    主题

    248

    帖子

    4万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    42713
    发表于 2016-7-2 10:59:01 | 显示全部楼层 |阅读模式
    本文实例讲述了WordPress增加返回顶部效果的方法。

    分享给大家供大家参考。具体实现方法如下:

    返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.
    第一步:在下面主题文件footer.php底下加上这段代码:
    1. <font face="微软雅黑"><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></font>
    复制代码
    top.js代码如下:
    1. <font face="微软雅黑">//<![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. //]]>
    41. </font>
    复制代码
    第二步:在主题文件style.css文件中加入以下样式:
    1. <font face="微软雅黑">/*返回顶部*/
    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. }</font>
    复制代码
    这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.


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


    快捷导航:√IDC促销信息 | √源码求购/出售 | √域名求购/出售 | √友情链接交换 | √刷优豆专区(限荣誉会员) | √自助开通荣誉会员
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    回帖奖励

    [详情]

  • * 每天自己主题被回复3次可获得额外2金钱奖励。
  • * 每天回复他人主题5次可获得额外3贡献的奖励。
  • * 奖励每天都可领取,一定要多参与论坛讨论哦。
  • * 同一主题的重复回复不计。
  • QQ|小黑屋|免责声明|优站社区  |网站地图  

    GMT+8, 2017-11-25 13:38 , Processed in 1.132270 second(s), 39 queries .

    Powered by Discuz! X3.2 Licensed

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表