JavaScript, défiler jusqu'à un élément : options scrollIntoView | We.Inc
Testez chaque option de scrollIntoView dans une zone interactive, corrigez les titres masqués sous un header sticky avec scroll-margin-top, et copiez le code de défilement fluide en JavaScript et en CSS pur.
Défiler jusqu'à un élément en JavaScript
Appelez element.scrollIntoView({ behavior: 'smooth', block: 'start' }) pour amener un élément dans la vue. block détermine où il arrive verticalement : start, center, end ou nearest. Si un header sticky recouvre la cible, donnez-lui en CSS un scroll-margin-top égal à la hauteur du header au lieu de calculer des décalages en JavaScript.
Options de scrollIntoView
Option
Valeurs
Par défaut
"smooth", "instant", "auto" (suit le scroll-behavior CSS)
"auto"
block (vertical)
"start", "center", "end", "nearest"
"start"
inline (horizontal)
"start", "center", "end", "nearest"
"nearest"
true / false au lieu des options
true = block start, false = block end (inline nearest)
Il existe trois façons d'amener la page jusqu'à un élément : scrollIntoView sur l'élément, scrollTo avec une position en pixels, et un simple lien vers un id. Le bac à sable montre l'effet de chaque valeur de block et comment scroll-margin-top garde un titre dégagé d'une barre fixe, puis les exemples couvrent le code nécessaire pour les menus, les erreurs de formulaire et les listes façon messagerie.
Choisissez une ligne cible et une valeur de block, puis appuyez sur Défiler. Seule la zone de démo bouge, cette page reste en place.
Augmentez la marge de défilement pour qu'elle corresponde à la barre sticky grise et regardez la cible s'arrêter juste en dessous.
Alternez behavior entre smooth et instant pour comparer les deux.
Copiez l'appel scrollIntoView et la règle CSS générés pour votre propre page.
scroll-margin-top s'applique aussi quand quelqu'un ouvre un lien vers #section : une seule règle CSS corrige donc les clics et les URL partagées.
Utilisez block: 'nearest' pour la navigation au clavier dans une liste. Il ne défile que le nécessaire et ne fait rien si l'élément est déjà visible.
Le défilement fluide sur une longue page peut sembler lent. Placez html { scroll-behavior: smooth } dans une media query prefers-reduced-motion: no-preference pour que les personnes qui demandent moins d'animations obtiennent des sauts instantanés.
scrollIntoView fait défiler chaque ancêtre défilable, y compris la page. Quand seul un panneau intérieur doit bouger, définissez plutôt le scrollTop de ce panneau ou appelez panel.scrollTo.
Questions fréquentes
Comment défiler jusqu'à un élément avec un décalage pour un header fixe ?
Ajoutez scroll-margin-top à la cible, par exemple h2 { scroll-margin-top: 80px }. La spécification CSS scroll snap demande aux navigateurs de respecter cette marge pour scrollIntoView et pour les liens vers des #id, même sans aucun snapping.
Comment rendre le défilement fluide ?
Passez behavior: 'smooth' à scrollIntoView ou scrollTo, ou définissez scroll-behavior: smooth sur l'élément html pour que chaque défilement programmé et chaque lien interne soient animés. scroll-behavior n'a aucun effet sur le défilement fait par l'utilisateur avec une molette ou au toucher.
Quelle est la différence entre scrollIntoView et scrollTo ?
scrollIntoView part d'un élément et calcule la position pour vous. window.scrollTo({ top, behavior }) se déplace vers une position exacte en pixels, et scrollBy se déplace d'une quantité relative. Utilisez scrollTo quand vous avez déjà un nombre, par exemple pour revenir à une position enregistrée.
Comment remonter en haut de la page ?
window.scrollTo({ top: 0, behavior: 'smooth' }). Pour un panneau défilable, appelez la même méthode sur l'élément du panneau au lieu de window.
Pourquoi scrollIntoView ne fait-il rien ?
Les causes courantes sont un appel avant que l'élément n'existe (lancez-le après le rendu, par exemple dans un effet React), un élément en display: none, ou l'option nearest avec un élément déjà entièrement visible.
Choisir une valeur de block
start convient aux sauts vers une section ou un titre, car le lecteur commence en haut de celle-ci. center fonctionne bien pour attirer l'attention sur un seul champ, comme le premier champ invalide d'un formulaire. end convient à une messagerie ou un journal où l'élément le plus récent doit se trouver en bas.
nearest est l'option discrète : elle parcourt la distance minimale nécessaire et laisse tranquilles les éléments visibles, ce qui est exactement ce qu'il faut quand une touche fléchée déplace la surbrillance dans une liste.
Le faire sans JavaScript
Un lien ordinaire comme <a href="#pricing"> défile déjà jusqu'à l'élément dont l'id est pricing, met à jour la barre d'adresse et fonctionne avec le bouton retour. Ajoutez scroll-behavior: smooth à l'élément html et scroll-margin-top aux cibles, et beaucoup de menus de table des matières n'ont besoin d'aucun script.
Utilisez JavaScript quand le défilement suit autre chose qu'un clic sur un lien : un formulaire qui échoue à la validation, un nouveau message qui arrive ou un résultat de recherche sélectionné.
Code pour défiler jusqu'à un élément
Défilement fluide vers une section
Récupère l'élément par son id et amène son bord supérieur en haut de la vue.
Décalage pour header sticky en CSS
Une seule règle corrige le chevauchement pour les défilements scriptés et pour les liens qui se terminent par #id. La media query supprime l'animation pour les personnes qui préfèrent moins de mouvement.
Amener le premier champ invalide dans la vue
center garde le champ et son libellé au milieu de l'écran ; le focus y amène aussi les utilisateurs au clavier.
Défiler uniquement à l'intérieur d'un panneau
Utilise la position de l'élément dans le panneau, donc la page autour ne bouge pas.
React : défiler jusqu'à une ref
La ref pointe vers le nœud DOM une fois rendu, l'appel se fait donc dans un gestionnaire de clic ou un effet.
Bac à sable scrollIntoView
Cette zone a sa propre barre sticky. Choisissez une ligne et des options, puis faites défiler. La zone applique le même calcul d'alignement avec scrollTo, donc le reste de la page ne bouge pas.