jQuery animate:scrolltop 在 Firefox 或 Web Explorer 中不起作用

jQuery animate: scrolltop not working in firefox or web explorer

本文关键字：Web Explorer 不起作用 Firefox animate scrolltop jQuery      更新时间：2023-09-26

我有一个导航栏，链接到我页面的其他部分。一切都可以在chrome中运行，但是当我在Firefox或Web浏览器上尝试时，链接只会转到页面顶部。我尝试使用我在其他帖子中看到的(html，正文(解决方案，但它仍然不起作用。

这是代码笔 - 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，在我删除它之后，页面会滚动，只是没有到正确的位置，因为它不再应用导航高度。现在我必须弄清楚如何解决这个问题哈哈

你应该更改 var lineBorder = parseInt($('.section-seperator'(.css('

border-top'((; to 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);
  });
});
相关文章：