ScrollTop works in Chrome and Edge but not Firefox

Question

So I have a JavaScript function that scrolls to the desired element when that part of the navigation bar is clicked. It works fine in Chrome and Edge, but not Firefox or IE.
The function:

$('html', 'body').animate({
  scrollTop:$('.'+nextView).offset().top}, 1500
);

nextView is a variable from another function where it determines which part of the nav was clicked. Basically, it contains the name of the div to be scrolled into view.

Anyone know why it doesn't work? Or an alternative method of auto scrolling that will work?

Answer 1

Try .position() instead of .offset() to see if that works. Might require some correction.

EDIT: it's probably related to your selector. Use html, body as 1 string:

$('html, body').animate({
  scrollTop:$('.'+nextView).offset().top}, 1500
);

Answer 2

I made a slight change to the code and now it seems to work. I find the position of the element to be scrolled to before the animate call, then put that variable into the scrollTop and it works now, even in IE!

scrollPos = $('.'+nextView).offset().top;
$('html, body').animate({
  scrollTop: scrollPos
}, 1500);