Hé! Avant d'aller trop loin dans le trou du lapin de défilement régulier basé sur JavaScript, sachez qu'il existe une fonctionnalité CSS native pour cela: scroll-behavior.
html ( scroll-behavior: smooth; )Et avant de rechercher une bibliothèque telle que jQuery pour vous aider, il existe également une version JavaScript native du défilement fluide, comme ceci:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Dustan Kasten a un polyfill pour cela. Et vous n'atteindriez probablement cela que si vous faisiez quelque chose avec le défilement de la page qui ne pourrait pas être fait avec les liens de saut #target et CSS.
Accessibilité du défilement fluide
Quelle que soit la technologie que vous utilisez pour un défilement fluide, l'accessibilité est un problème. Par exemple, si vous cliquez sur un #hashlien, le comportement natif consiste pour le navigateur à changer le focus sur l'élément correspondant à cet ID. La page peut défiler, mais le défilement est un effet secondaire du changement de focus.
Si vous remplacez le comportement de changement de focus par défaut (ce que vous devez faire pour empêcher le défilement instantané et activer le défilement fluide), vous devez gérer vous-même le changement de focus .
Heather Migliorisi a écrit à ce sujet, avec des solutions de code, dans Smooth Scrolling and Accessibility.
Défilement fluide avec jQuery
jQuery peut également le faire. Voici le code pour effectuer un défilement de page fluide jusqu'à une ancre sur la même page. Il a une certaine logique intégrée pour identifier ces liens de saut et ne pas cibler d'autres liens.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));Voir le défilement de la page Pen Smooth dans jQuery par Chris Coyier (@chriscoyier) sur CodePen.
Si vous avez utilisé ce code et que vous êtes tous comme HEY WHAT'S WITH THE BLUE OUTLINES?!, Lisez les informations sur l'accessibilité ci-dessus.