CODEWITHSUNDEEP
javascriptjquery
Jarod Thornton
Jarod Thornton

Reputation: 401

Best Practice for jQuery Compatibility

I've got this jQuery to add a back to top button. It's simple and works very well. I have it running as a plugin in WordPress MultiSite on probably 120 websites. Today I noticed it isn't working on every site. There are no console errors, but my guess is that some other plugin or script is causing a conflict. This is inconsistent from one site to the other and I can't find a reason.

How can I write this jQuery so it doesn't experience compatibility issues?

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

        });

Example site 1: http://anntowergallery.com/exhibits/ Doesn't work.

Example site 2: http://iemajen.com/asphaltanimals/ Works

I've tried this out on a dozen sites or so and cannot pin point what could cause the problem. No errors in console on the gallery website.

I appreciate any feedback.

Upvotes: 1

Views: 138

Answers (3)

jehna1
jehna1

Reputation: 3130

Strange bug you got there.

Seems that in site 1 you have the following CSS:

body {
    overflow-x: hidden;
}

When that CSS is in place, the $(window).scroll event listener won't fire. If you remove that CSS line, the JS works just fine.

You can also bind the scroll event to the body instead of the window:

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

But I recall that had some issues with IE. Probably you'd be safest to bind both $("body").scroll and $(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;
    });

});

Upvotes: 1

Mottie
Mottie

Reputation: 86413

I wouldn't use that code on mobile devices... every tick of the window scroll is firing either a fadeIn or fadeOut. It would be better to add a flag to check if the scroll to top button is visible, or not (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;
  });

});

Upvotes: 0

Cody
Cody

Reputation: 2482

You've got a style element inside the body tag right before your scroll script, which isn't valid and may be preventing the script from executing. Try moving that into the head.

This is the part I'm talking about:

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

Upvotes: 0

Related Questions