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 :