Javascript jQuery兼容性的最佳实践

我用这个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：不工作

示例站点2：工程

我已经在十几个网站上试过了，但无法确定问题的原因。画廊网站上的控制台中没有错误

---

非常感谢您的反馈。

您遇到了奇怪的错误

在site 1中，您似乎有以下CSS：

body {
    overflow-x: hidden;
}

当CSS就位时，

$（窗口）.scroll

事件侦听器将不会启动。如果删除CSS行，JS就可以正常工作

您还可以将滚动事件绑定到

正文

，而不是

窗口

：

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

但我记得IE有一些问题。可能您最安全的做法是同时绑定

$（“body”）。滚动
和
$（窗口）。滚动
：

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
元素，该元素无效，可能会阻止脚本执行。尝试将其移动到
头部

这就是我要说的部分：

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


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

jQuery（文档）.ready（函数（$）{
可见值=假；
//检查窗口是否在顶部，如果不是，则显示按钮
$（窗口）。滚动（函数（）{
var scrollTop=$（this.scrollTop（）；
如果（！visible&&scrollTop>100）{
$（“.scrollToTop”）.fadeIn（）；
可见=真实；
}否则如果（visible&&scrollTop不同的站点是否使用不同版本的jQuery？如果在函数中设置断点，它是否会在不起作用的站点上被调用？我会说否。此特定站点是使用与相同的主题构建的-该主题基于，并且我使用它的所有站点都是子主题。谢谢jehna1。省略<代码>overflow-x:hidden；
成功了。这是用于移动设备的，所以我只是将其移动到了一个新的断点。我添加了代码，但没有添加代码。使用它有什么优点/缺点吗？@jarmerson我想说，如果有人某天添加另一个
overflow-x:hidden；
样式，最好有一个万无一失的代码。我以前试过你的代码或者更改CSS也没什么不同。@jarmerson嗯，你在测试哪个浏览器？我发现它至少应该在Chrome和Firefox.Chrome上工作。我模拟了，你是对的，它在Firefox 7上不工作。是的，我有一些乱七八糟的东西。谢谢你指出。我已经移动了一些东西，以便CSS加载到浏览器中我所有网站上的广告。
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;
  });

});