Le défilement fluide sur jQuery

smooth-scrolling-with-jquery

Déjà intégré par défaut sur certains navigateurs, l’effet scroll fluide se manifeste par un défilement fluide de la page web.
En fonction des paramètres utilisateurs, cet effet se produit lorsque l’on descend ou l’on monte grâce à la molette de la souris et bien sûr les touches du clavier.
Dans certains cas, il se peut que l’effet fluide ne soit pas intégré.
Pour le générer au clic, une solution existe. Il s’agit de la génération de l’effet au clic sur une ancre grâce à JavaScript.

La solution en Jquery

Il est à noter que les codes JavaScript suivants seront précédé de l’appel de la bibliothèque jQuery :

Dans le cadre d’une utilisation simplifiée des ancres, vous devrez obtenir un code HTML semblable à celui-ci :

Ainsi, le script jQuery sera comme suit :

Au click sur un lien dont l’attribut href commence par #, nous enregistrons la valeur de son attribut href ($(this).attr(“href”)) dans la variable the_id.
Ensuite, nous faisons une petite animation (animate()) consistant à utiliser le scroll (scrollTop) pour le pointer vers le haut de l’élément ciblé ($(the_id).offset().top), lentement (slow).

La fonction return false; offre la possibilité d’éviter le comportement normal lors de l’évènement du clic sur le lien.
A savoir le saut vers l’ancre ainsi que son affichage dans l’url.

Quant au sélecteur $(‘html, body’), sa présence permet la correction d’un bug sur Webkit de Safari et Chrome ne semblant comprendre qu’une seule animation sur l’élément body.

Répondre