web-dev-qa-db-fra.com

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

En ce moment, j'utilise ceci:

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

qui ne fonctionne pas dans Chrome et dans Opera, un petit scintillement se produit: le navigateur défile instantanément vers le haut, puis de nouveau vers le bas, puis commence à défiler lentement, comme il se doit.

Y a-t-il une meilleure manière de faire cela?

javascriptjqueryscrolljquery-animatejquery-effects
17
Alex

Vous retournez true à partir de la fonction click. Cela n'empêchera donc pas le comportement du navigateur par défaut (c'est-à-dire naviguer jusqu'à l'ancrego-to-top. Comme Mark l'a dit, utilisez:

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

Donc, votre code devrait maintenant ressembler à:

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

Pour que cela fonctionne à l'opéra, cette réponse s'est avérée utile.

Mettre cela avec votre click()

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

Exemple de code sur jsfiddle .

Note latérale _ si vous ne faites qu'utiliser .each(), vous affectez un gestionnaire de clics qu'il n'est pas nécessaire de parcourir sur la collection.

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

De plus, s'il y a plus d'un élément avec l'ID #go-to-top votre balise sera invalide, essayez de le changer en classe .go-to-top

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

Cela fonctionne multi-navigateur

1
user2122751

peut-être quelque chose comme 

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

ainsi que celui en html.

modifier> 

$('#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!

1
Xand94

Hm ... étrange, avec jsFiddle, je peux le faire fonctionner correctement dans Opera (version 11.01), mais dans Chrome, il saute juste au sommet et ne l’anime pas comme vous le souhaitez.

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

J'espère que cela aide un peu, même si ce n'est pas vraiment une réponse.

Si ce que j'ai créé ne correspond pas à votre code HTML, etc., veuillez le mettre à jour et l'ajouter.

Meilleures salutations, 

Christian

Avertissement: je n'avais pas utilisé la fonction de sauvegarde de jsFiddle auparavant, donc je ne sais pas pour combien de temps il l'a sauvegardé.

1
Holger

J'utilise ceci, 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)
})
})
0
Sajjad Hossain

Cela fonctionnera dans tous les navigateurs. Cela évite la balise de hachage sur l'URL, le défilement est terminé! 

 $('#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;
      }
    }
  });
0
Mohamed Arshath

J'ai une solution fluide de deux manières: un défilement régulier et un bouton lisse.

Avec JavaScript désactivé, il s’agit simplement d’un lien en bas de la page vers l’ancre top.
(# comme href peut être assez instable.)

Avec JavaScript activé:

  1. Masquer la div contenant le lien (pour éviter le scintillement).
  2. Fixe la position de la div en bas à droite de la fenêtre.
  3. Supprimez l'attribut href et ajoutez le gestionnaire click pour un défilement régulier . (Garde l'URL et l'historique du navigateur ordonnés et je n'ai besoin d'aucun return ou preventDefault dans la fonction de défilement)
  4. Fade div in/out en fonction de la position du défilement:
    Afficher lien uniquement si position de défilement> hauteur de la fenêtre.
  5. Mettre à jour la position sur redimensionner.

HTML

<body>
    <a name="top"></a>
    ...
    <div id="scrolltotop" style="display:block;text-align:right">
        <a href="#top" title="scroll to top"><img src="scrolltotop.png" alt="scroll to top"></a>
    </div>
</body>

jQuery 

function scrolltotop_display()
{
    var el=$('#scrolltotop');
    if((window.pageYOffset||document.documentElement.scrollTop)>window.innerHeight)
    { if(!el.is(':visible')) { el.stop(true, true).fadeIn(); } }
    else { if(!el.is(':animated')) { el.stop(true, true).fadeOut(); }}
}
function scrolltotop_position()
{
    var el=$('#scrolltotop');
    el.css('top', window.innerHeight-100);
    el.css('left', window.innerWidth-100);
    scrolltotop_display();
}
$(window).on('load', function(){
    $('#scrolltotop').css('display', 'none');
    $('#scrollToTop').css('position', 'fixed');
    scrolltotop_position();
    $('#scrollToTop a').removeAttr('href');
    $('#scrollToTop a').on('click', function(){$('html, body').animate({scrollTop:0}, 500);});
});
$(window).on('scroll', scrolltotop_display);
$(window).on('resize', scrolltotop_position);
0
Titus