web-dev-qa-db-fra.com

jQuery .scrollTop (); + animation

Je règle la page pour faire défiler vers le haut quand un bouton est cliqué. Mais d’abord, j’ai utilisé une instruction if pour voir si le haut de la page n’était pas réglé sur 0. Ensuite, si ce n’est pas 0, j’anime la page pour faire défiler vers le haut.

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

La partie délicate à présent est d’animer quelque chose APRÈS que la page ait défilé jusqu’au sommet. Donc, ma pensée suivante est de savoir quelle est la position de la page. J'ai donc utilisé le journal de la console pour le savoir.

console.log(top);  // the result was 365

Cela m’a donné un résultat de 365, je suppose que c’est le numéro de la position où j’étais juste avant de défiler vers le haut.

Ma question est la suivante: comment définir la position sur 0 pour pouvoir ajouter une autre animation qui s'exécute une fois que la page est à 0?

Merci!

jqueryjquery-animatescrolltop
157
Juan Di Diego

Pour ce faire, vous pouvez définir une fonction de rappel pour la commande animate qui s'exécutera une fois l'animation de défilement terminée.

Par exemple:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Où ce code d'alerte est, vous pouvez exécuter plus de javascript pour ajouter plus d'animation.

En outre, le «swing» est là pour définir l'assouplissement. Consultez http://api.jquery.com/animate/ pour plus d'informations.

281
Thomas Stiegler

Essayez ce code:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
43
Shailesh

Utilisez ceci: 

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});
26
Beep

Essayez ceci à la place:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}
7
Kishan Patel

pour cela, vous pouvez utiliser la méthode de rappel

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);
5
The Mechanic

Code avec fonction click ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

});

.toTop = classe d'élément cliqué peut-être img ou a

3
Scorby

Solution simple:

faire défiler un élément par ID ou NOM:

SmoothScrollTo("#elementId", 1000);

code:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}
1
T.Todua
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });
0
Junaid