Question

我有一个基于Bootstrap的单页网站。所有菜单项都是指向正文中div的内部链接，我有一些平滑的滚动javascript来动画页面的滚动。

在Chrome和IE浏览器中一切正常，但在Firefox中链接根本不起作用。这似乎是一个Javascript问题，因为如果我注释掉指向smoothscroll .js文件的行，那么链接工作正常。

我正在使用的javascript是这样的：

$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
  $(this).click(function(e) {
    e.preventDefault();
    var targetOffset = $($(this).attr('href')).offset().top;
    $('body').animate({scrollTop: targetOffset - 70}, 700);
  });
}
});

我错过了什么/做错了什么？

您可以查看有问题的实际网站here。

Answer 1

将您的scrollTop动画更改为

$('body,html').animate({scrollTop: targetOffset - 70}, 700);

这应该在FF中修复它还可以在Chrome中使用。

的更新 的

万一你问为什么：我不确定，所以这就是我想要发生的事情：如果你比较FF和Chrome中的HTML和BODY， FF HTML - 元素的大小与渲染文档一样大。在Chrome中，您的HTML - 元素具有浏览器窗口的大小，而您的BODY - 元素与您呈现的页面一样大。它们呈现不同。 FF在其窗口内滚动HTML，Chrome滚动BODY内的HTML。

正如其他线程/评论（here for expample）所指出的那样，这个解决方案会进行两次调用。因此，您可以在滚动前使用if或使用document。后者没有为我做这个技巧，因为它滚动到我希望它滚动到的地方，但没有动画。没有if我个人觉得阅读起来更好，在这种情况下调用动画两次不应该是一件大事。因此，更好的解决方案是检测浏览器并使用$('html')或$('body')。

平滑滚动Javascript打破内部链接，仅在Firefox中

1 个答案: