0

I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.

Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.

The javascript that I'm using is this:

$('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);
  });
}
});

What am I missing/doing wrong?

You can take a look at the actual site in question here.

4

1 回答 1

1

将您的 scrollTop 动画更改为

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

这应该可以在 FF 中修复它，并且仍然可以在 Chrome 中使用。

更新

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

正如在其他线程/评论中指出的那样（此处为示例），此解决方案进行了两次调用。因此，您可以if在滚动之前放置一个或使用document. 后者对我没有用，因为它滚动到我想要滚动到的位置，但没有动画。如果没有if我个人，我会觉得它读起来更好，在这种情况下调用两次动画不应该是一件大事。所以更好的解决方案是检测浏览器并使用$('html')or $('body')。

于 2014-01-28T03:16:21.277 回答