Best Practice for jQuery Compatibility

Question

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.

• dsh: Do the different sites use different versions of jQuery? If you put a breakpoint in your function, does it get called on the sites that don't work?
• Jarod Thornton: I would say no. This particular site iemajen.com/lexingtonhabitatforhumanity/services/how-to-apply is built using the same theme as iemajen.com/asphaltanimals/services/commercial - The theme is based on themble.com/bones and all the sites I use it on are child themes.

Answer 1

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

• Jarod Thornton: Thank you jehna1. Omitting the overflow-x: hidden; did the trick. That was used for mobile so I just moved it to a new breakpoint. I added the code, but it works without. Is there an advantage / disadvantage to using that?
• jehna1: @jarmerson I'd say it's better to have a foolproof code if someone someday adds another overflow-x: hidden; style.
• Jarod Thornton: I tried your code before changing the CSS and it made no difference.
• jehna1: @jarmerson hmm, which browser are you testing with? I found it should work at least on Chrome and Firefox.
• Jarod Thornton: Chrome. I emulated and you're correct it doesn't work in Firefox 7

Answer 2

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>

• Jarod Thornton: Yeah I have some messy stuff laying around.
• Jarod Thornton: Thanks for pointing that out. I've moved a few things around so the CSS loads in the head on all my sites.

Answer 3

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