Animer scrollTop ne fonctionne pas sous firefox

Firefox lieux le déborder à l' html niveau, à moins d'être spécifiquement conçu pour se comporter différemment.

Pour qu'il fonctionne dans Firefox, utilisez

$('body,html').animate( ... );

Exemple de travail

Le CSS solution serait de définir les styles suivants:

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

Je suppose que le JS solution serait moins invasive.

---

Mise à jour

Beaucoup de la discussion ci-dessous met l'accent sur le fait que l'animation de la scrollTop de deux éléments serait la cause de la fonction de rappel pour être invoqué à deux reprises. Le navigateur des fonctions de détection ont été proposées et par la suite obsolète, et certains sont sans doute plutôt farfelue.

Si le rappel est idempotent et ne nécessite pas beaucoup de puissance de calcul, le tirant deux fois peut être un non-problème. Si de multiples appels de la fonction de rappel sont vraiment un problème, et si vous voulez éviter la fonctionnalité de détection, il peut être plus simple à appliquer que le rappel est exécuté qu'une fois de l'intérieur de la fonction de rappel:

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

J'ai passé du temps à essayer de comprendre pourquoi mon code ne fonctionne pas -

$('body,html').animate({scrollTop: 50}, 500);

Le problème était dans mon css -

body { height: 100%};

Je l'ai mis à auto à la place (et a gauche se soucier pourquoi il a été mis à 100% en premier lieu). Qu'il fixe pour moi.

Méfiez-vous de cela.
J'ai eu le même problème, ni Firefox ou Explorer le défilement avec la

$('body').animate({scrollTop:pos_},1500,function(){do X});

J'ai donc utilisé comme le dit David

$('body, html').animate({scrollTop:pos_},1500,function(){do X});

Grand, il a travaillé, mais nouveau problème, puisqu'il y a deux éléments, le corps et l'html, la fonction est exécutée deux fois, c'est, faire X s'exécute deux fois.

essayé seulement avec "html", et Firefox et Explorer de travail, mais maintenant, google Chrome ne prend pas en charge cette.

Il est donc nécessaire de corps pour Chrome, et html pour les navigateurs Firefox et Explorer. Est-ce un bug jQuery? ne sais pas.

Méfiez-vous cependant de votre fonction, car il sera exécuté deux fois.

C'est la vraie affaire. Il fonctionne sur Chrome et Firefox parfaitement.
Il est même triste que certains ignorants vote moi vers le bas. Ce code littéralement fonctionne parfaitement sur tous les navigateurs. Vous avez seulement besoin d'ajouter un lien et de mettre l'id de l'élément que vous souhaitez faire défiler dans le href et il fonctionne sans préciser quoi que ce soit. Pure réutilisables et fiable des codes.

$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if (locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
//use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});

Pour moi le problème était que firefox automatiquement sauté à l'ancre avec le nom-attribut le même que le nom de hachage je l'ai mis dans l'URL. Même si je l'ai mis .preventDefault() pour l'en empêcher. Donc après avoir changé le nom des attributs, firefox n'a pas automatiquement pour les ancres, mais l'exécution de l'animation à droite.

@Toni Désolé si ce n'était pas compréhensible. Le truc, c'est que j'ai changé les valeurs de hachage dans l'URL, par exemple http://www.someurl.com/#hashname. Ensuite, j'ai eu par exemple un point d'ancrage comme <a name="hashname" ...></a> pour jQuery qui devrait faire défiler automatiquement. Mais ce n'est pas parce qu'il a sauté à droite à l'ancre avec le même nom d'attribut dans Firefox sans défilement de l'animation. Une fois j'ai changé le nom de l'attribut à quelque chose de différent à partir du nom de hachage, par exemple à name="hashname-anchor", le défilement travaillé.

setTimeout(function(){                               
$('html,body').animate({ scrollTop: top }, 400);
},0);

Espère que cela fonctionne.