javascript - jQuery 动画 : scrolltop not working in firefox or web explorer

Question

我有一个链接到页面其他部分的导航栏。一切都在 Chrome 中运行，但当我在 Firefox 或 Web Explorer 上尝试时，链接只会转到页面顶部。我尝试使用我在其他帖子中看到的 (html, body) 解决方案，但它仍然无法正常工作。

这是代码笔 - http://codepen.io/Davez01d/pen/NxMzYy?editors=0010

这是具体的 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);
  });

编辑:摆弄了一段时间后，我发现它与这部分有关 - navHeight + lineBorder，在我删除它之后，页面会滚动，只是没有滚动到正确的位置，因为它不再应用导航高度。现在我必须弄清楚如何解决这个问题，哈哈

Answer 1

您应该更改 var lineBorder = parseInt($('.section-seperator').css('border-top')); var lineBorder = $('.section-seperator').outerHeight();或者在 jQuery css 函数中使用 borderTopWidth。

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