Question

我有一个链接到我页面其他部分的导航栏。一切都在chrome中工作，但是当我在firefox或web explorer上尝试时，链接就会转到页面顶部。我尝试使用我在其他帖子中看到的（html，body）解决方案，但它仍然无效。

以下是codepen - 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（$（＆＃39; .section-seperator＆＃39;）。css（＆＃39; border-top＆＃39;））; to var lineBorder = $（＆＃39; .section-seperator＆＃39;）。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);
  });
});

jQuery animate：scrolltop无法在firefox或web explorer中运行

1 个答案: