jQuery cross-browser "faire défiler vers le haut", avec animation

Actuellement, j'utilise ceci:

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

qui ne fonctionne pas dans Chrome, Opéra, je reçois un petit scintillement: le navigateur instantanément défile vers le haut, puis vers le bas et puis il commence à défiler lentement vers le haut, comme il se doit.

Est-il une meilleure façon de le faire?

source d'informationauteur Alex | 2011-04-07

  1. 64

    Vous êtes de retour true à partir de la fonction de clic, afin de ne pas empêcher le navigateur par défaut de comportement (c'est à dire la navigation à lago-to-top d'ancrage. Comme Mark l'a dit, l'utilisation:

    $('html,body').animate({ scrollTop: 0 }, 'slow');

    De sorte que votre code devrait ressembler à ça:

    $('#go-to-top').each(function(){
    $(this).click(function(){ 
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});
  2. 5

    À le faire fonctionner dans l'opéra de ce réponse s'est avéré très utile.

    De le mettre avec votre click()

    $(this).click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 'slow');
});

    Exemple de Code sur jsfiddle.

    Note de côté si tout ce que vous faites avec le .each() est l'affectation d'un gestionnaire de clic vous n'avez pas besoin de parcourir la collection, il peut être simplifié à ceci:

    $('#go-to-top').click(function(){ 
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
        }, 'slow');
});

    Aussi si il n'y a plus d'un élément avec l'id #go-to-top votre balise sera pas valide, essayez de passer à une classe .go-to-top

  3. 1

    peut-être quelque chose comme 

    $('body').animate({scrollTop:0}, 'slow');

    ainsi que le html.

    edit > 

    $('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('body').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('document').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('window').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

    devrait couvrir tous les navigateurs!

  4. 1

    Hm... étrange, avec jsFiddle je peux l'obtenir pour fonctionner correctement dans Opera (version 11.01), mais dans Chrome, il saute vers le haut et ne pas l'animer comme vous le souhaitez.

    Vous pouvez voir le jsFiddle ici si vous voulez:
    http://jsfiddle.net/H7RFU/

    J'espère que ça aide un peu, si ce n'est pas vraiment une réponse.

    Si ce que j'ai fait n'est pas ce que votre html etc ressemble, veuillez la mettre à jour et ajouter.

    Cordialement,

    Christian

    Mise en garde: je n'ai pas utilisé la fonction de sauvegarde de jsFiddle avant, donc je ne sais pas pour combien de temps il a sauvé.

  5. 1
    $(window).animate({ scrollTop: 0 }, 'slow');

    Il fonctionne de la croix-navigateur

  6. 0

    Ce sera de travailler dans tous les navigateurs. Il évite le hash tag sur l'url, donc, le défilement fluide est fait! 

     $('#back-top a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {

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

          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
  7. 0

    Je suis avec cela, C'est aussi simple 

    $(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})