WordPress返回顶部js代码改进版

2013年9月26日 MK WordPress 1 阅读 6218次

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

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

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

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

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

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

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

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呢，这样代码就更简便了，于是我又将函数去掉，变成了下面的代码：

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函数的方法，

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

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

jquery, js, setInterval, setTimeout, wordpress, 返回顶部

WP-Syntax代码高亮插件使用方法 查看MySQL数据库的命令详解