jQuery 兼容性的最佳实践

Best Practice for jQuery Compatibility

本文关键字：最佳 兼容性 jQuery      更新时间：2023-09-26

我有这个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/作品

我已经在十几个网站上尝试过这个，但无法确定可能导致问题的原因。库网站上的控制台中没有错误。

我感谢任何反馈。

奇怪的错误，你到了那里。

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

body {
    overflow-x: hidden;
}

当该 CSS 就位时，$(window).scroll事件侦听器将不会触发。如果你删除该CSS行，JS工作得很好。

您还可以将滚动事件绑定到body而不是window：

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

但我记得IE有一些问题。也许您同时绑定$("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;
    });
});
在

滚动脚本之前，body 标记内有一个 style 元素，该元素无效，可能会阻止脚本执行。尝试将其移动到head中。

这就是我要说的部分：

<style type="text/css">
    .scrollToTop {
        /* ... */
    }
</style>

我不会在移动设备上使用该代码...窗口滚动的每个刻度都在触发fadeIn或fadeOut。最好添加一个标志来检查滚动到顶部按钮是否可见（演示）

jQuery(document).ready(function($) {
  var visible = false;
  //Check to see if the window is top if not then display button
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (!visible && scrollTop > 100) {
      $(".scrollToTop").fadeIn();
      visible = true;
    } else if (visible && scrollTop <= 100) {
      $(".scrollToTop").fadeOut();
      visible = false;
    }
  });
  //Click event to scroll to top
  $(".scrollToTop").click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 800);
    return false;
  });
});
相关文章：