JQuery : comment associer la fonction scrollTop() à une animation ?
Une fonction JQuery permet de déplacer l'ascenseur au sein d'une page web en fonction de la position d'un élément dans la page.
La fonction scrollTop de la bibliothèque JavaScript JQuery permet de connaître la position verticale d'un élément d'une page web. Si on lui donne un entier en paramètre, il est possible de déplacer l'ascenseur à la position souhaitée par rapport à un élément.
//On récupère la position d'un élément. var scroll = $(p).scrollTop(); //On utilise l'élément body de la page pour manipuler toute la page. //On fixe la valeur à 0 pour faire remonter l'ascenseur en haut de la page. $(body).scrollTop(0);
Si l'on souhaite ajouter une animation, une fois le scrollTop réalisé, il faut utiliser la fonction animate(). Cette fonction crée une animation avec un effet et une durée choisie. Elle prend également comme paramètre une fonction qui sera appelée à la fin de l'animation. On peut donc utiliser cette fonction pour afficher un message une fois le navigateur remonté en haut de la page, ou pour lancer une autre animation.
//La durée est de 0,5 seconde, l'effet utilisé est swing, et à la fin, la fonction affiche un message indiquant à l'utilisateur qu'il est en haut de la page.
$(body).animate({scrollTop:0}, '500', 'swing', function() {
alert(Vous êtes en haut de la page);
});