明凯博客

关注网站技术,一个特立独行的程序员

WordPress返回顶部js代码改进版

前几天为博客加了返回顶部、查看评论、转到底部的功能,下面是地址:
WordPress返回顶部、查看评论、转到底部代码

由于使用的是主题下的jquery库,使我的表情插件Wp grins 失效,评论表情不显示了,最终检查是js冲突了,于是,我就改调用wordpress内部jquery库,调用方法:

1
< ?php wp_enqueue_script("jquery"); ?>

但要注意的是: wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面。
而且 js 的写法是:

1
2
3
jQuery(document).ready(function($) {
// "$"符号在这里才能被识别
});

因为$的位置不对,所以上次的up函数和dn函数不能使用$,因此函数不能使用,于是我改用document.body.scrollTop来设置浏览器的高度,这样确实是可以了,但是在ff和ie下这个js方法又不是适用,所以又被我舍弃了。

无赖之举,只能调用jquery函数了,
下面是调用内部函数的方法,在多个浏览器能够兼容,

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
jQuery(document).ready(function($) {
    $body = window.opera ? "CSS1Compat" == document.compatMode ?
 $("html") :$("body") :$("html,body"), 
    $("#roll_up").mouseover(function() {
        $body.up();
    }).mouseout(function() {
        clearTimeout(mk);
    }).click(function() {
        $body.animate({
            scrollTop:0
        }, 400);
    });
     $("#roll_down").mouseover(function() {
        $body.dn();
    }).mouseout(function() {
        clearTimeout(mk);
    }).click(function() {
        $body.animate({
            scrollTop:$(document).height()
        }, 400);
    });
     $("#roll_comment").click(function() {
        $body.animate({
            scrollTop:$("#comment").offset().top
        }, 400);
    }); 
    $.fn.up = function() {
        $(window).scrollTop($(window).scrollTop() - 1), mk = setTimeout("$body.up()", 50);
    }; 
    $.fn.dn = function() {
        $(window).scrollTop($(window).scrollTop() + 1), mk = setTimeout("$body.dn()", 50);
    };
});

在这里我就不强调$.fn的用法了,上面的方法能够使用,而且和我的Wp grins兼容。

最后收尾的时候我突然想,为什么一定要调用函数呢?

我何不把setTimeout换成setInterval呢,这样代码就更简便了,于是我又将函数去掉,变成了下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ?
 $("html") : $("body")) : $("html,body");
    $("#roll_up").mouseover(function() {
        mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()-1)}, 50);
    }).mouseout(function() {
        clearInterval(mk);
    }).click(function() {
        $body.animate({scrollTop: 0},400);
    });
    $("#roll_down").mouseover(function() {
        mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()+1)}, 50);
    }).mouseout(function() {
        clearInterval(mk);
    }).click(function() {
        $body.animate({scrollTop: $(document).height()},400);
    });
    $("#roll_comment").click(function() {
        $body.animate({scrollTop: $("#comment").offset().top},400);
    });
});

最后大功告成,但是要注意的是clearInterval使用jquery函数的方法,

1
 mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()-1)}, 50);

这里不能调用错,这样就完美的解决了滚动代码,而且兼容所有的浏览器。

, , , , ,

相关文章

1 条评论 “WordPress返回顶部js代码改进版

发表评论

电子邮件地址不会被公开。 必填项已用*标注