Smooth Scroll Javascript Breaks Internal Links, Only In Firefox

Question

I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.

Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.

The javascript that I'm using is this:

$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
  $(this).click(function(e) {
    e.preventDefault();
    var targetOffset = $($(this).attr('href')).offset().top;
    $('body').animate({scrollTop: targetOffset - 70}, 700);
  });
}
});

What am I missing/doing wrong?

You can take a look at the actual site in question here.

Answer 1

Change your scrollTop animation to

$('body,html').animate({scrollTop: targetOffset - 70}, 700);

That should fix it in FF an also still work in Chrome.

update

Just in case you're asking why: I don't know for sure, so this is what I guess is happening: if you compare the HTML and BODY in FF and Chrome, in FF the size of the HTML-Element is as big as your rendered document. In Chrome your HTML-Element has the size of the Browser-Window and your BODY-Element is as big as your Page rendered. They render differently. FF scrolls the HTML inside its Window and Chrome scrolls the BODY inside the HTML.

As pointed out in other threads / comments (here for expample) this solution makes two calls. So you could put an if before scrolling or use document. The latter didn't do the trick for me, because it scrolled where I wanted it to scroll to, but didn't animate. Without if I personally just find it nicer to read and it shouldn't be such a big thing to call animate twice in that case. So the better solution would be detecting the browser and using either $('html') or $('body').