jQuery
Défilement animé au clic sur un lien d’ancre
Fiche écrite en 2016 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.
Tous les liens d’un menu d’ancres font défiler la page en douceur jusqu’à leur cible. event.preventDefault() empêche le saut instantané, et stop() annule une animation en cours si le visiteur clique sur un autre lien entre-temps.
<ul id="navigation">
<li>
<a href="#lien1">lien1</a>
</li>
<li>
<a href="#lien2">lien2</a>
</li>
<li>
<a href="#lien3">lien3</a>
</li>
</ul>$('#navigation a').on('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250);
event.preventDefault();
});