Firefox coloca el desbordamiento en el html
nivel, a menos que esté específicamente diseñado para comportarse de manera diferente.
Para que funcione en Firefox, use
$('body,html').animate( ... );
Ejemplo de trabajo
La solución CSS sería establecer los siguientes estilos:
html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }
Supongo que la solución JS sería menos invasiva.
Actualizar
Gran parte de la discusión a continuación se centra en el hecho de que la animación scrollTop
de dos elementos provocaría que la devolución de llamada se invoque dos veces. Las características de detección del navegador han sido sugeridas y posteriormente desaprobadas, y algunas son posiblemente exageradas.
Si la devolución de llamada es idempotente y no requiere mucha potencia informática, dispararla dos veces puede ser un completo problema. Si las invocaciones múltiples de la devolución de llamada son realmente un problema, y si desea evitar la detección de características, podría ser más sencillo exigir que la devolución de llamada solo se ejecute una vez desde dentro de la devolución de llamada:
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');
}));