jQuery .scrollTop (); + animation

Je mets la page en surbrillance lorsqu’un bouton est cliqué. Mais d’abord, j’ai utilisé une instruction if pour voir si le haut de la page n’était pas défini sur 0. Si ce n’est pas 0, j’anime la page pour la 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 la plus délicate consiste maintenant à animer quelque chose APRÈS que la page ait défilé vers le haut. Donc, ma prochaine pensée 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 devine que c’est le numéro de position que j’étais juste avant de faire défiler vers le haut.

Ma question est la suivante: comment définir la position à 0 afin que je puisse append une autre animation qui s’exécute une fois que la page est à 0?

Merci!

Pour ce faire, vous pouvez définir une fonction de rappel pour la commande animate qui s’exécutera une fois l’animation 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 append plus d’animation.

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

Essayez ce code:

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

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

Essayez plutôt ceci:

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

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

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

Code avec fonction clic ()

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

.toTop = classe de l’élément cliqué peut-être img ou a

 jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-}, 500, 'swing', function() { alert("Finished animating"); }); 

Solution simple:

faire défiler vers n’importe quel é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; }); } 

tu dois voir ça

 $(function () { $('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; } } }); }); 

ou essayez-les

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