Question

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

如何编写此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就可以了。

您还可以将滚动事件绑定到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;
    });

});

Answer 2

您的滚动脚本前面的style标记内有一个body元素，这是无效的，可能会阻止脚本执行。尝试将其移至head。

这是我正在谈论的部分：

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

Answer 3

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

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;
  });

});

jQuery兼容性的最佳实践

3 个答案: