WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)

20,428
WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)
  • 4.56 / 5 5
4.56分(18票)

之前发表过一种样式的“返回顶部、返回底部、评论”效果,今天在这里分享Devework.com目前使用的效果:一个博客侧边滑动,返回顶部,查看评论的小工具,作为WordPress等博客专用。说到这个小工具,可是小有来头啊,据说(强调是“据说”)这原来是一位WordPress高手林木木首创的(人家称之为“滑动导航”),然后被某人改进做成了WordPress 插件,并且成功提交到WordPress官方去了。所以说不是自己的一定要说明来源,不然…;最后说一句,这个挺像插件wp-auto-top,姑且当做是wp-auto-top插件代码化吧~

以下的代码如果没有错的应该来源于林木木,图片来源于wp-auto-top插件,感谢原作者。为防止JS冲突,本人稍作了修改。

教程如下:

一、确保你的主题已经加载jQ库,然后将以下js代码以gototop.js文件保存,放在主题的目录下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
    $("#shang").mouseover(function() {
        up()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        $body.animate({
            scrollTop: 0
        },
        400)
    });
    $("#xia").mouseover(function() {
        dn()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        $body.animate({
            scrollTop: $(document).height()
        },
        400)
    });
    $("#comt").click(function() {
        $body.animate({
            scrollTop: $("#comments").offset().top
        },
        400)
    });
});
function up() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() - 1);
    fq = setTimeout("up()", 50)
};
function dn() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() + 1);
    fq = setTimeout("dn()", 50)
};

二、打开主题的footer.php,在.....前加入以下代码:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/gototop.js"></script>
<div id="shangxia">
       <div id="shang" title="↑ 返回顶部"></div>
       <?php if ( is_singular() ){ ?>
       <div id="comt" title="查看评论"></div>
       <?php } ?>
       <div id="xia" title="↓ 移至底部"></div>
</div>

/js/gototop.js需要改为与你的实际路径。

三、将以下css代码丢入主题的style.css中:

1
2
3
4
5
6
7
8
#shangxia{position:fixed;top:45%;right:50%;display:block;margin-right:-540px;z-index:999;}
#shang,#comt,#xia{background:url(gototop.png) no-repeat;position:relative;cursor:pointer;
height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:left -30px;height:32px;}
#xia{background-position:left -68px;}
#comt:hover{background-position:right -30px;}
#shang:hover{background-position:right 0;}
#xia:hover{background-position:right -68px ;}

上面的css相关代码有些需要修改的,如果没有css基础那就帮不了你了。图片gototop.png有以下参考(下载地址在这里):

找一张你喜欢的重名为gototop,放到主题目录下的images文件夹(应该都有这个文件夹吧?)即可。

如果发现查看评论的按钮失效,原因可能是你的主题的评论的div的ID不是“comments”,需要修改js代码。

如果不能实现像本站Devework.com的滑动效果的话应该是js冲突了,自己折腾吧~

喵~本文目前有22条留言,欢迎发表评论!

  1. 还是插件简单

    [回复]
  2. 11#
    :

    用上代码,页面就一直抽筋,抖啊抖。

    [回复]
  3. 已生效,多谢博主大大分享~~正在看如何将鼠标放上去的卷动效果加快点。。。 :mrgreen:

    [回复]
  4. 谢了。已经使用了.但是我的网站把鼠标移到箭头上,没有缓慢移动的效果。希望博主能解答下。谢了哈

    [回复]
  5. 8#
    :

    up() 和 dn() 没有生效,显示fq未定义

    [回复]
    • js可能与你主题的其冲突了,或者没有加载jquery库,请自行排查

      [回复]
      • :

        结果是没加载jQuery库,谢谢!

        [回复]
  6. 在IE下面可以 firefox下不行 看来是JS冲突?

    [回复]
  7. 6#
    :

    😛 😛 已用到博客中,感谢呀。

    [回复]
  8. 难道不适合响应式主题?!!!CSS老没效果!

    [回复]
    • 你自己哪里出错了吧?

      [回复]
  9. 哦耶,找到了!

    [回复]
  10. 赶上地板鸟
    :

    我都添加了,但是不知怎么的不显示评论的那个图标,但有上下图标

    [回复]
    • 如果是首页的话当然没有评论的那个图标啊。。。。

      [回复]
      • :

        我点进了文章页也没有,www.mumbobo.com
        那个id comment,相当于锚吧,这个名称不同应该不影响图标啊,怎么不显示呢

        [回复]
        • 对呀,就算锚对应的位置不存在,也不会影响显示。看了你的网站,说实话我也不知道为什么会不显示。。。

          [回复]
  11. 板凳也不错
    :

    请教一下,我用你这个方法在IE下可用,在Chrome不可用,这是为什么

    [回复]
    • 不可能吧?我一直在用chrome,正常啊。

      [回复]
  12. 传说中的沙发
    :

    感谢博主分享,终于找到可用的了,谢谢!

    [回复]

打破沉默,我来发表评论鸟~