javascript - jQuery 兼容性的最佳实践

Question

我有这个 jQuery 来添加一个返回顶部按钮。它很简单并且效果很好。我将它作为 WordPress MultiSite 插件在大约 120 个网站上运行。今天我注意到它并不是在每个网站上都有效。没有控制台错误，但我的猜测是其他一些插件或脚本导致了冲突。这在一个网站与另一个网站之间是不一致的，我找不到原因。

如何编写此 jQuery，使其不会遇到兼容性问题？

        jQuery(document).ready(function($){

            //Check to see if the window is top if not then display button
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $(".scrollToTop").fadeIn();
                } else {
                    $(".scrollToTop").fadeOut();
                }
            });

            //Click event to scroll to top
            $(".scrollToTop").click(function(){
                $("html, body").animate({scrollTop : 0},800);
                return false;
            });

        });

示例站点 1:http://anntowergallery.com/exhibits/不起作用。

示例站点 2:http://iemajen.com/asphaltanimals/作品

我已经在十几个网站上尝试过此操作，但无法确定是什么导致了问题。画廊网站上的控制台没有错误。

感谢任何反馈。

Answer 1

你遇到了奇怪的错误。

似乎在站点 1 中您有以下 CSS:

body {
    overflow-x: hidden;
}

当该 CSS 就位时，$(window).scroll 事件监听器将不会触发。如果删除该 CSS 行，JS 就可以正常工作。

您还可以将滚动事件绑定(bind)到 body 而不是 window:

$("body").scroll(function(){
    ...
});

但我记得 IE 有一些问题。绑定(bind) $("body").scroll 和 $(window).scroll 可能是最安全的:

jQuery(document).ready(function($){
    //Check to see if the window is top if not then display button
    $(window).add("body").scroll(function(){
        if ($(this).scrollTop() > 100) {
            $(".scrollToTop").fadeIn();
        } else {
            $(".scrollToTop").fadeOut();
        }
    });

    //Click event to scroll to top
    $(".scrollToTop").click(function(){
        $("html, body").animate({scrollTop : 0},800);
        return false;
    });

});