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')
.