0Pricing
CSS Academy · Leçon

scroll-behavior : smooth

Activez un défilement fluide pour les liens d’ancrage et les défilements programmatiques avec scroll-behavior.

scroll-behavior : smooth est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que scroll-behavior ?

scroll-behavior contrôle si le défilement déclenché par une navigation (liens d’ancrage, JavaScript scrollTo()) doit être animé de manière fluide ou s’effectuer instantanément.

scroll-behavior: smooth

Définir scroll-behavior: smooth sur l’élément html ou body rend fluide la navigation vers tous les liens d’ancrage de la page :

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Instantané ou fluide

Valeurs :

  • auto (valeur par défaut) : saut instantané
  • smooth : défilement animé jusqu’à la cible

Navigation par lien d’ancrage

Lorsque le défilement fluide est activé, cliquer sur un lien tel que <a href="#contact"> fait défiler progressivement jusqu’à l’élément dont l’attribut est id="contact", au lieu d’effectuer un saut instantané.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

scrollTo() de JavaScript avec défilement fluide

Transmettez behavior: "smooth" aux méthodes de défilement de JavaScript pour obtenir un défilement animé :

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Interaction avec prefers-reduced-motion

Le défilement fluide peut provoquer le mal des transports. Désactivez-le toujours pour les personnes qui préfèrent réduire les animations :

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior sur les conteneurs

Appliquez cette propriété à n’importe quel conteneur défilable, et pas uniquement à la page :

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Limitations

Le scroll-behavior CSS ne permet pas de contrôler la durée du défilement ni sa fonction d’accélération. Pour contrôler précisément l’animation, utilisez l’API Web Animations de JavaScript ou des bibliothèques comme GSAP avec leurs modules de défilement.

scroll-padding-top pour les en-têtes fixes

Lorsqu’un en-tête fixe recouvre les cibles d’ancrage, scroll-padding-top ajoute un décalage afin que la cible ne soit pas masquée derrière l’en-tête :

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin et scroll-padding

scroll-margin ajoute directement un décalage à l’élément cible ; scroll-padding ajoute un décalage au conteneur de défilement. Ces deux propriétés permettent de résoudre le problème des en-têtes fixes :

  <div class="section">Section content</div>

Remarque sur l’accessibilité

Le défilement fluide améliore l’expérience utilisateur. Assurez-vous toujours que la navigation par ancrage fonctionne même sans cette fonctionnalité — ne comptez pas sur le défilement fluide pour assurer le fonctionnement, mais uniquement pour améliorer la présentation visuelle.

Vérification rapide

Comment vous assurer que l’animation de défilement fluide est désactivée pour les personnes sensibles aux mouvements vestibulaires ?

Récapitulatif

scroll-behavior: smooth sur html active le défilement animé et fluide pour les liens d’ancrage et les méthodes de défilement de JavaScript. Utilisez scroll-padding-top pour décaler les cibles de défilement afin qu’elles ne soient pas masquées par les en-têtes fixes. Désactivez toujours le défilement fluide dans une requête média prefers-reduced-motion: reduce pour des raisons d’accessibilité.

Questions Fréquemment Posées

La leçon « scroll-behavior : smooth » est-elle gratuite ?

Oui — le texte complet de « scroll-behavior : smooth » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « scroll-behavior : smooth » ?

Activez un défilement fluide pour les liens d’ancrage et les défilements programmatiques avec scroll-behavior. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « scroll-behavior : smooth » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. overflow : hidden, scroll, auto, clip
  2. scroll-behavior : smooth
  3. scroll-snap-type et scroll-snap-align
  4. Personnalisation de la barre de défilement avec ::-webkit-scrollbar
← Retour à CSS Academy