Lorsqu’un utilisateur navigue sur une page web, il est parfois nécessaire de faire défiler automatiquement la page jusqu’à un élément précis — par exemple, un bouton, un formulaire ou une section spécifique.
Heureusement, JavaScript fournit une méthode simple et efficace pour accomplir cela : scrollIntoView().
Dans cet article, nous allons voir comment utiliser scrollIntoView(), comprendre ses options, et découvrir des exemples concrets pour améliorer l’expérience utilisateur (UX) sur vos sites web.
Qu’est-ce que scrollIntoView() ?
La méthode scrollIntoView() fait partie de l’API du DOM (Document Object Model). Elle permet de faire défiler la page jusqu’à ce qu’un élément devienne visible dans la zone d’affichage (viewport).
Syntaxe de base
element.scrollIntoView();
Cette ligne de code suffit pour faire défiler la page jusqu’à l’élément ciblé.
Exemple :
document.getElementById("section2").scrollIntoView();
Cela fera défiler la page jusqu’à l’élément ayant l’ID section2.
Exemple pratique simple
Voici un exemple concret d'utilisation de la fonction scrollIntoView() :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>scrollIntoView() en JavaScript</title>
<style>
section {
height: 100vh;
padding: 20px;
border-bottom: 1px solid #ccc;
}
button {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
}
</style>
</head>
<body>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<button onclick="scrollToSection3()">Aller à la section 3</button>
<script>
function scrollToSection3() {
document.getElementById("section3").scrollIntoView();
}
</script>
</body>
</html>
Quand l’utilisateur clique sur le bouton, la page défile automatiquement jusqu’à la Section 3.
Ajouter un défilement fluide
Par défaut, le défilement est instantané, ce qui peut donner une impression “brusque”. Pour un effet plus agréable, on peut ajouter un défilement fluide (smooth scroll) grâce à une option supplémentaire.
Exemple :
document.getElementById("section3").scrollIntoView({
behavior: "smooth"
});
Le navigateur fera défiler la page progressivement vers la section cible.
Autres options de scrollIntoView()
La méthode accepte plusieurs paramètres utiles sous forme d’un objet d’options :
element.scrollIntoView({
behavior: "smooth" | "auto",
block: "start" | "center" | "end" | "nearest",
inline: "start" | "center" | "end" | "nearest"
});
1. behavior
2. block
Détermine la position verticale de l’élément après le défilement :
-
"start" : l’élément est aligné en haut de la fenêtre.
-
"center" : l’élément est centré verticalement.
-
"end" : l’élément est aligné en bas.
-
"nearest" : le navigateur choisit la position la plus proche.
3. inline
Similaire à block, mais pour l’alignement horizontal (utile pour les éléments en ligne ou les conteneurs à défilement horizontal).
Exemple :
document.querySelector("#section2").scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
Utiliser scrollIntoView() après un événement
Vous pouvez déclencher le défilement automatiquement après une action utilisateur comme un clic, un chargement de page ou une validation de formulaire.
Exemple avec un clic sur un lien :
<a href="#" id="goto-form">Aller au formulaire</a>
<form id="contact" style="margin-top: 1000px;">
<h2>Formulaire de contact</h2>
</form>
<script>
document.getElementById("goto-form").addEventListener("click", function(e) {
e.preventDefault(); // empêche le comportement par défaut du lien
document.getElementById("contact").scrollIntoView({
behavior: "smooth"
});
});
</script>
Ce code empêche le rechargement de la page et fait défiler automatiquement jusqu’à la section du formulaire formulaire.
Comparaison : scrollIntoView() vs window.scrollTo()
| Méthode |
Description |
Exemple |
scrollIntoView() |
Fait défiler jusqu’à un élément spécifique |
element.scrollIntoView() |
window.scrollTo() |
Fait défiler jusqu’à une position donnée (x, y) |
window.scrollTo({ top: 500, behavior: 'smooth' }) |
Conseil : utilisez scrollIntoView() quand vous savez quel élément atteindre, et scrollTo() si vous devez contrôler précisément la position de défilement.
Compatibilité navigateur
Bonne nouvelle : la méthode scrollIntoView() est prise en charge par tous les navigateurs modernes, y compris :
-
Chrome
-
Firefox
-
Edge
-
Safari
-
Opera
Attention : les anciennes versions d’Internet Explorer ne prennent pas en charge les options comme behavior: "smooth".
Quelques bonnes pratiques
-
Utilisez le défilement fluide (behavior: "smooth") pour améliorer l’expérience utilisateur.
-
Vérifiez que la cible existe avant d’appeler scrollIntoView() afin d’éviter les erreurs JavaScript.
-
Combinez avec des animations CSS pour enrichir l’effet visuel.
-
Pensez à l’accessibilité : assurez-vous que le focus clavier suit le défilement pour les utilisateurs de lecteurs d’écran.
Exemple complet : page avec plusieurs sections
Voici un exemple fonctionnel de mini site avec un défilement fluide :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Défilement fluide avec JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav {
position: fixed;
top: 10px;
left: 10px;
background: #f5f5f5;
padding: 10px;
border-radius: 8px;
}
nav a {
display: block;
margin: 5px 0;
color: #007BFF;
cursor: pointer;
}
section {
height: 100vh;
padding: 20px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<nav>
<a id="link1">Section 1</a>
<a id="link2">Section 2</a>
<a id="link3">Section 3</a>
</nav>
<section id="section1">Bienvenue dans la section 1</section>
<section id="section2">Voici la section 2</section>
<section id="section3">Et enfin la section 3</section>
<script>
document.getElementById("link1").addEventListener("click", () => {
document.getElementById("section1").scrollIntoView({ behavior: "smooth" });
});
document.getElementById("link2").addEventListener("click", () => {
document.getElementById("section2").scrollIntoView({ behavior: "smooth" });
});
document.getElementById("link3").addEventListener("click", () => {
document.getElementById("section3").scrollIntoView({ behavior: "smooth" });
});
</script>
</body>
</html>
Conclusion
La méthode scrollIntoView() est une solution simple, performante et native pour faire défiler la page jusqu’à un élément précis avec JavaScript.
Elle est idéale pour :
- Les sites “One Page” ;
- Les boutons “Aller en haut / en bas de page” ;
- Les formulaires ou ancres internes ;
- Les animations fluides de navigation.
En la combinant avec les options behavior, block et inline, vous pouvez créer des expériences utilisateur modernes et dynamiques sans aucune dépendance externe.