Плавная прокрутка Javascript разрывает внутренние ссылки, только в Firefox

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

Что я пропускаю / делаю неправильно?

Вы можете посмотреть на данный сайт здесь.

Answer 1

Измените анимацию scrollTop на

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

Это должно исправить это в FF, а также в Chrome.

Обновить

Просто на тот случай, если вы спросите, почему: я точно не знаю, так что это то, что, я думаю, происходит: если вы сравните HTML а также BODY в фф и хром, в фф размер HTML-Элемент такой же большой, как ваш отрендеренный документ. В Chrome твой HTML-Элемент имеет размер окна браузера и ваш BODY-Элемент такой же большой, как и ваша страница. Они делают по-разному. FF прокручивает HTML внутри своего окна и Chrome прокручивает BODY внутри HTML,

Как указано в других темах / комментариях ( здесь для примера), это решение делает два вызова. Так что вы могли бы положить if перед прокруткой или использованием document, Последний не помог мне, потому что он прокручивал туда, куда я хотел, но не анимировал. Без if Лично я считаю, что читать приятнее, и в таком случае не стоит так сильно называть анимацию дважды. Таким образом, лучшим решением будет обнаружение браузера и использование либо $('html') или же $('body'),