J'ai configuré la page pour qu'elle défile vers le haut lorsqu'un bouton est cliqué. Mais j'ai d'abord utilisé une instruction if pour voir si le haut de la page n'était pas à 0. Puis, si ce n'est pas le cas, j'anime la page pour qu'elle défile 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 maintenant est d'animer quelque chose APRÈS que la page ait défilé vers le haut. Ma prochaine idée est donc de trouver la position de la page. J'ai donc utilisé le journal de la console pour le découvrir.
console.log(top); // the result was 365
Cela m'a donné un résultat de 365, je suppose que c'est la position à laquelle je me trouvais juste avant de faire défiler la page vers le haut.
Ma question est la suivante : comment puis-je définir la position à 0, de manière à pouvoir ajouter 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 sera exécutée 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");
});
À l'endroit où se trouve ce code d'alerte, vous pouvez exécuter plus de javascript pour ajouter une animation supplémentaire.
De plus, le 'swing' ; est là pour définir l'assouplissement. Consultez le site http://api.jquery.com/animate/ pour plus d'informations.
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 callback
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);