O Firefox coloca o estouro no html
nível, a menos que tenha um estilo específico para se comportar de maneira diferente.
Para que ele funcione no Firefox, use
$('body,html').animate( ... );
Exemplo de trabalho
A solução CSS seria definir os seguintes estilos:
html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }
Eu diria que a solução JS seria menos invasiva.
Atualizar
Muita discussão abaixo se concentra no fato de que a animação scrollTop
de dois elementos faria com que o retorno de chamada fosse invocado duas vezes. Os recursos de detecção de navegador foram sugeridos e subseqüentemente preteridos, e alguns são sem dúvida bastante rebuscados.
Se o retorno de chamada for idempotente e não exigir muito poder de computação, acioná-lo duas vezes pode ser um problema não completo. Se várias chamadas do retorno de chamada forem realmente um problema e se você quiser evitar a detecção de recursos, pode ser mais direto garantir que o retorno de chamada seja executado apenas uma vez a partir do retorno de chamada:
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');
}));