jQuery animate: scrolltop not working in firefox or web explorer

Question

I have a navbar that links to other sections of my page. Everything works in chrome but when I try it on firefox or web explorer the links just go to the top of the page. I tried using the (html, body) solution that I've seen in other posts but it is still not working.

Here is the codepen - http://codepen.io/Davez01d/pen/NxMzYy?editors=0010

and here is the specific javascript -

  $('.to-home').click(function() {
    $('html, body').animate({
      scrollTop: $('#Home').offset().top - navHeight
    },600);
  });

  $('.to-about').click(function() {
    $('html, body').animate({
      scrollTop: $('#about-anchor').offset().top - navHeight - aboutPadding + lineBorder
    },600);
  });

  $('.to-portfolio').click(function() {
    $('html, body').animate({
      scrollTop: $('#portfolio-anchor').offset().top - navHeight + lineBorder
    },600);
  });

  $('.to-contact').click(function() {
    $('html, body').animate({
      scrollTop: $('#contact-anchor').offset().top - navHeight + lineBorder
    },600);
  });

EDIT: After fiddling with it for a while I have found that it has to do with this part - navHeight + lineBorder, after I removed that, the page would scroll, just not to the right place because it no longer applies the nav height. Now I have to figure out how to fix that haha

Have you tried this? http://stackoverflow.com/questions/17776544/jquery-scrolltop-firefox-not-working — Alexander Mikhalchenko, Feb 15 '16 at 22:42

galart · Accepted Answer · 2016-02-16T00:41:02.970

You should change var lineBorder = parseInt($('.section-seperator').css('border-top')); to var lineBorder = $('.section-seperator').outerHeight(); or use borderTopWidth in jQuery css function.

http://codepen.io/galart/pen/zrbWEZ

$(document).ready(function() { 
  var lineBorder = $('.section-seperator').outerHeight();

  $('#home-btn').addClass('on-section');

  $('.to-home').click(function() {
    $('html, body').animate({
      scrollTop: $('#Home').offset().top - navHeight
    },600);
  });

  $('.to-about').click(function() { 
    $('html,body').animate({
      scrollTop: $('#about-anchor').offset().top - navHeight - aboutPadding + lineBorder 
    },600);
  });

  $('.to-portfolio').click(function() {
    $('html, body').animate({
      scrollTop: $('#portfolio-anchor').offset().top - navHeight + lineBorder
    },600);
  });

  $('.to-contact').click(function() {
    $('html, body').animate({
      scrollTop: $('#contact-anchor').offset().top - navHeight + lineBorder
    },600);
  });
});

jQuery animate: scrolltop not working in firefox or web explorer

1 Answers1