Effet de smooth scroll avec jQuery

Cet article vous présente le code à utiliser afin d’ajouter un effet de smooth scroll aux ancres nommées d’une page web en utilisant jQuery.

Intégration de jQuery

Intégrez jQuery à votre page web dans l’en-tête de votre page web via un CDN ou une autre méthode de votre choix.

                <script 
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

Code JS de l’effet smooth scroll

Ajoutez le code suivant dans un fichier javascript lié à votre page web ou directement via la balise <script> dans l’en-tête de votre page web.

                $(document).ready(function() {
$('a[href^="#"]').click(function(){
var id = $(this).attr("href");
if (id === '#') {
return;
}
$('html, body').animate({scrollTop:$(id).offset().top}, 'slow');
});
});

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.