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'); });});Sauf mention contraire*, l’article Effet de smooth scroll avec jQuery et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.
Laisser un commentaire