Animate scrollTop ne fonctionne pas dans Firefox

Cette fonction fonctionne très bien. Il fait défiler le corps jusqu'au décalage du conteneur souhaité

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop}, delay);
    return false;
}

Mais pas dans Firefox. Pourquoi?

-ÉDITER-

Pour gérer le double déclenchement dans la réponse acceptée, je suggère d'arrêter l'élément avant l'animation:

$('body,html').stop(true,true).animate({scrollTop: stop}, delay);

Firefox place le débordement au htmlniveau, sauf s'il est spécifiquement conçu pour se comporter différemment.

Pour le faire fonctionner dans Firefox, utilisez

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

Exemple de travail

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

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

Je suppose que la solution JS serait la moins invasive.

Mettre à jour

Une grande partie de la discussion ci-dessous se concentre sur le fait que l'animation scrollTopde deux éléments entraînerait l'appel du rappel à deux reprises. Des fonctionnalités de détection de navigateur ont été suggérées puis obsolètes, et certaines sont sans doute plutôt exagérées.

Si le rappel est idempotent et ne nécessite pas beaucoup de puissance de calcul, le déclencher deux fois peut être un non-problème complet. Si plusieurs appels du rappel sont vraiment un problème et si vous souhaitez éviter la détection de fonctionnalité, il peut être plus simple de faire en sorte que le rappel ne soit exécuté qu'une seule fois à partir du 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');
}));

La détection des fonctionnalités, puis l'animation sur un seul objet pris en charge serait bien, mais il n'y a pas de solution en une seule ligne. En attendant, voici un moyen d'utiliser une promesse pour faire un seul rappel par exécution.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

MISE À JOUR: Voici comment vous pouvez utiliser la détection des fonctionnalités à la place. Ce morceau de code doit être évalué avant votre appel d'animation:

// Note that the DOM needs to be loaded first, 
// or else document.body will be undefined
function getScrollTopElement() {

    // if missing doctype (quirks mode) then will always use 'body'
    if ( document.compatMode !== 'CSS1Compat' ) return 'body';

    // if there's a doctype (and your page should)
    // most browsers will support the scrollTop property on EITHER html OR body
    // we'll have to do a quick test to detect which one...

    var html = document.documentElement;
    var body = document.body;

    // get our starting position. 
    // pageYOffset works for all browsers except IE8 and below
    var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;

    // scroll the window down by 1px (scrollTo works in all browsers)
    var newY = startingY + 1;
    window.scrollTo(0, newY);

    // And check which property changed
    // FF and IE use only html. Safari uses only body.
    // Chrome has values for both, but says 
    // body.scrollTop is deprecated when in Strict mode.,
    // so let's check for html first.
    var element = ( html.scrollTop === newY ) ? 'html' : 'body';

    // now reset back to the starting position
    window.scrollTo(0, startingY);

    return element;
}

// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();

Maintenant, utilisez le var que nous venons de définir comme sélecteur pour l'animation de défilement de page, et utilisez la syntaxe normale:

$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
    // normal callback
});

J'ai passé des années à essayer de comprendre pourquoi mon code ne fonctionnait pas -

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

Le problème était dans mon css -

body { height: 100%};

Je l'ai réglé à la autoplace (et je me suis demandé pourquoi il avait été réglé 100%en premier lieu). Cela a réglé le problème pour moi.

Vous voudrez peut-être éviter le problème en utilisant un plugin - plus précisément, mon plugin :)

Sérieusement, même si le problème de base a été résolu depuis longtemps (différents navigateurs utilisent différents éléments pour le défilement de la fenêtre), il y a pas mal de problèmes non triviaux sur la ligne qui peuvent vous trébucher:

• Simplement animer les deux bodyet html a ses problèmes ,
• tester les fonctionnalités du comportement réel du navigateur est difficile à obtenir (voir mes commentaires sur la réponse de @ Stephen ),
• mais surtout, il y a tout un tas de problèmes d'utilisabilité que vous voudriez résoudre pour une expérience utilisateur décente.

Je suis évidemment partial, mais jQuery.scrollable est en fait un bon choix pour résoudre ces problèmes. (En fait, je ne connais aucun autre plugin qui les gère tous.)

De plus, vous pouvez calculer la position cible - celle vers laquelle vous faites défiler - de manière à toute épreuve avec la getScrollTargetPosition()fonction dans cet essentiel .

Tout cela vous laisserait avec

function scrolear ( destino ) {
    var $window = $( window ),
        targetPosition = getScrollTargetPosition ( $( destino ), $window );

    $window.scrollTo( targetPosition, { duration: 1000 } );

    return false;
}

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

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

Alors j'ai utilisé comme David l'a dit

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

Super cela a fonctionné, mais nouveau problème, car il y a deux éléments, le corps et le html, la fonction est exécutée deux fois, c'est-à-dire, X exécute deux fois.

essayé uniquement avec «html», et Firefox et Explorer fonctionnent, mais maintenant Chrome ne le prend pas en charge.

Il faut donc du corps pour Chrome et du html pour Firefox et Explorer. Est-ce un bogue jQuery? ne sais pas.

Méfiez-vous simplement de votre fonction, car elle fonctionnera deux fois.

Je recommanderais de ne pas compter sur bodyni htmlcomme solution plus portable. Ajoutez simplement un div dans le corps qui vise à contenir les éléments défilés et le stylisez comme pour activer le défilement en taille réelle:

#my-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

(en supposant que display:block;et que top:0;left:0;les valeurs par défaut correspondent à votre objectif), utilisez-les $('#my-scroll')pour vos animations.

C'est la vraie affaire. Cela fonctionne parfaitement sur Chrome et Firefox. Il est même triste que certains ignorants me votent contre. Ce code fonctionne littéralement parfaitement tel quel sur tous les navigateurs. Il vous suffit d'ajouter un lien et de mettre l'id de l'élément que vous souhaitez faire défiler dans le href et cela fonctionne sans rien spécifier. Code purement réutilisable et fiable.

$(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 [];
  }
});

J'ai rencontré le même problème récemment et je l'ai résolu en faisant ceci:

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top}, 'fast'});

Et youpi !!! cela fonctionne sur tous les navigateurs.

au cas où le positionnement n'est pas correct, vous pouvez soustraire une valeur de offset () .top en faisant ceci

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top-desired_value}, 'fast'});

Pour moi, le problème était que Firefox sautait automatiquement à l'ancre avec le nom-attribut identique au nom de hachage que j'ai mis dans l'URL. Même si j'ai mis .preventDefault () pour éviter cela. Ainsi, après avoir modifié les attributs de nom, Firefox n'a pas automatiquement accédé aux ancres, mais a exécuté correctement l'animation.

@Toni Désolé si ce n'était pas compréhensible. La chose est que j'ai changé les hachages dans l'URL comme www.someurl.com/#hashname. Ensuite, j'ai eu par exemple une ancre comme <a name="hashname" ...></a>vers laquelle jQuery devrait défiler automatiquement. Mais ce n'est pas le cas, car il est passé directement à l'ancre avec l'attribut de nom correspondant dans Firefox sans aucune animation de défilement. Une fois que j'ai changé l'attribut de nom en quelque chose de différent du nom de hachage, par exemple name="hashname-anchor", le défilement a fonctionné.

Pour moi, cela évitait d'ajouter l'ID au point d'animation:

Éviter:

 scrollTop: $('#' + id).offset().top

Préparer l'id au préalable et faire ceci à la place:

 scrollTop: $(id).offset().top

Corrigé dans FF. (Les ajouts css n'ont pas fait de différence pour moi)

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

J'espère que cela fonctionne.