scroll-behavior en CSS : un défilement animé vers une ancre sans JavaScript

Cliquer sur un lien d'ancrage du type #section-2 fait normalement sauter la page instantanément à l'endroit voulu, sans transition. Ce saut sec a longtemps poussé les développeurs à écrire du JavaScript juste pour animer ce déplacement. scroll-behavior règle ce cas précis en une seule ligne de CSS, sans script.

C'est une propriété discrète mais très utilisée dans la pratique : sommaire d'article, menu avec ancres internes, bouton de retour en haut de page. Elle s'applique généralement une seule fois, sur l'élément racine, pour affecter tous les défilements internes de la page.

Définition

scroll-behavior définit si un défilement déclenché par la navigation, un clic sur une ancre ou un défilement lancé en JavaScript, se fait de façon instantanée ou animée. Sa valeur par défaut, auto, correspond au saut instantané habituel. La valeur smooth déclenche une animation fluide gérée entièrement par le navigateur.

Syntaxe

html {
  scroll-behavior: smooth;
}

Appliquée sur l'élément html, cette seule ligne suffit à animer tous les défilements internes du document déclenchés par un lien d'ancrage, par exemple <a href="#tarifs">Voir les tarifs</a> pointant vers <section id="tarifs"> plus bas sur la page.

Ce que scroll-behavior ne couvre pas

scroll-behavior n'a aucun effet sur un défilement déclenché par la molette de la souris, le trackpad ou une barre de défilement manipulée à la main : ces gestes restent instantanés par nature. Elle ne s'applique qu'aux défilements programmés, qu'ils viennent d'un lien d'ancrage ou d'un appel JavaScript à scrollIntoView() ou scrollTo(), à condition de passer l'option behavior: "smooth" côté script pour rester cohérent.

/* Défilement en douceur à l'intérieur d'un conteneur précis, pas toute la page */
.panneau-lateral {
  scroll-behavior: smooth;
  overflow-y: auto;
}

La propriété peut aussi être posée sur un conteneur qui défile en interne, comme un panneau latéral avec overflow-y: auto, et pas seulement sur la page entière.

Respecter prefers-reduced-motion

Une animation de défilement, aussi discrète soit-elle, reste un mouvement à l'écran. Pour certains utilisateurs, en particulier ceux sujets à des troubles vestibulaires, ce mouvement peut provoquer un inconfort réel, allant du simple désagrément à des nausées. Le système d'exploitation expose une préférence, prefers-reduced-motion, que le CSS peut lire via une Media query.

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Cas d'usage courant : bouton de retour en haut

html {
  scroll-behavior: smooth;
}

Avec ce réglage posé une seule fois, un simple lien <a href="#top">Haut de page</a> suffit à recréer un bouton de retour en haut animé, sans écrire la moindre ligne de JavaScript ni gérer soi-même le calcul de la distance à parcourir.

Un piège fréquent : l'ancre cachée sous un en-tête fixe

Avec un en-tête en position: sticky ou en position fixed, une ancre atteinte par scroll-behavior: smooth peut arriver exactement sous ce bandeau, avec son titre à moitié masqué. Le défilement lui-même fonctionne parfaitement : c'est simplement le point d'arrivée qui tombe derrière un élément qui occupe le haut de l'écran en permanence.

section {
  scroll-margin-top: 5rem;
}

La propriété scroll-margin-top, posée sur la cible de l'ancre, ajoute une marge invisible au calcul du point d'arrivée du défilement, ce qui suffit à faire réapparaître le titre sous l'en-tête fixe.

FAQ

Le support est très large sur les navigateurs récents, Safari ayant été le dernier grand navigateur à l'implémenter. Sur un navigateur qui ne la comprend pas, la propriété est simplement ignorée et le défilement redevient instantané, sans erreur ni page cassée.

Non, scroll-behavior ne propose que deux valeurs, auto et smooth, sans aucun réglage de durée ou de courbe d'accélération : la vitesse est entièrement décidée par le navigateur et n'est pas personnalisable en CSS.

Non, ce sont deux propriétés complémentaires : scroll-snap-type gère l'alignement automatique sur des points d'arrêt précis pendant un défilement, alors que scroll-behavior ne fait qu'animer le trajet entre le point de départ et le point d'arrivée.