Tweet
Bonjour, dans ce tutoriel, vous allez apprendre à créer un scroll fluide en jQuery.
Le scrolling se traduit en français, par défilement, et le défilement d’écran, c’est quand vous descendez ou remontez dans la page.
Aujourd’hui, nous allons apprendre comment animer ce scrolling lorsque l’utilisateur appuie sur un lien commençant par une dièse (#), et le rendre donc plus fluide, et ce, avec la librairie jQuery (Je vous en avais parlé !).
Commencez par ouvrir votre page xHTML, et inclure les scripts à l’intérieur de la balise <head>
Comme vous l’auriez deviné, vous devez créer un fichier scroll.js, dans votre répertoire js/.
Ouvrez votre fichier scroll.js, et mettez y ce code :
Cette ligne sert à sélectionner tout les éléments <a> dont l’attribut href commence par un #
On initialise la variable cible qui contient la valeur de l’attribut href du lien auquel l’utilisateur à cliqué
NB: this correspond à l’élément sur lequel on est en train de « travailler », par conséquent, le lien cliqué.
On trouve l’élément a qui a comme attribut name, la valeur du href (en enlevant #) que l’on stock dans la variable hauteur.
On anime la page avec la fonction jQuery, animate, qui prend en argument scrollTop qui vaut la hauteur, et 1000, qui est la vitesse du scroll.
Et enfin, la fonction click() retourne false, pour ne pas afficher un # dans l’adresse de la page.
Source:Geeknoise
Le scrolling se traduit en français, par défilement, et le défilement d’écran, c’est quand vous descendez ou remontez dans la page.
Aujourd’hui, nous allons apprendre comment animer ce scrolling lorsque l’utilisateur appuie sur un lien commençant par une dièse (#), et le rendre donc plus fluide, et ce, avec la librairie jQuery (Je vous en avais parlé !).
Commencez par ouvrir votre page xHTML, et inclure les scripts à l’intérieur de la balise <head>
Code:
<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script> <script src="js/scroll.js" type="text/javascript"><!--mce:1--></script>
Ouvrez votre fichier scroll.js, et mettez y ce code :
Code:
$('a[href^=#]').click(function() {
cible = $(this).attr('href');
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('body').animate({scrollTop: hauteur}, 1000);
return false;
});
Décortiquons ce code
Code:
$('a[href^=#]').click(function() {
Code:
cible = $(this).attr('href');
NB: this correspond à l’élément sur lequel on est en train de « travailler », par conséquent, le lien cliqué.
Code:
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
Code:
$('html,body').animate({scrollTop: hauteur}, 1000);
Code:
return false;
Source:Geeknoise