Firefox розміщує перелив у точці html
рівні, якщо спеціально не розроблено поведінку.
Щоб змусити його працювати у Firefox, використовуйте
$('body,html').animate( ... );
Робочий приклад
Рішенням CSS було б встановити такі стилі:
html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }
Я б припустив, що рішення JS було б найменш інвазивним.
Оновлення
Багато обговорень нижче присвячено тому, що анімація scrollTop
двох елементів спричинить зворотний виклик двічі. Функції виявлення браузера запропоновані та згодом застарілі, а деякі, мабуть, досить надумані.
Якщо зворотний виклик є безвідмовним і не вимагає великих обчислювальних потужностей, його запускання двічі може бути повною проблемою. Якщо декілька викликів зворотного дзвінка справді є проблемою, і якщо ви хочете уникнути виявлення функцій, можливо, більш прямолінійно встановити, що зворотний виклик запускається лише один раз із зворотного дзвінка:
function runOnce(fn) {
var count = 0;
return function() {
if(++count == 1)
fn.apply(this, arguments);
};
};
$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
console.log('scroll complete');
}));