Rendez vos liens de même page légèrement plus agréables à utiliser avec cet effet natif de défilement fluide.

Le défilement fluide est une technique utilisée dans le développement Web pour créer une expérience de défilement fluide pour les utilisateurs. Il améliore la navigation dans une page Web en animant le mouvement de défilement au lieu du saut brusque par défaut.

Ce guide complet pour les développeurs Web vous aidera à mettre en œuvre un défilement fluide à l'aide de JavaScript.

Le défilement fluide se produit lorsqu'une page Web défile en douceur jusqu'à la section souhaitée, au lieu d'y sauter instantanément. Cela rend l'expérience de défilement plus agréable et transparente pour l'utilisateur.

Le défilement fluide peut améliorer l'expérience utilisateur d'une page Web de plusieurs manières :

  • Il améliore l'attrait visuel en éliminant les sauts de défilement brusques et discordants, ajoutant une touche d'élégance.
  • Il encourage l'engagement des utilisateurs en offrant une expérience de défilement fluide et transparente. Ceci, à son tour, motive les utilisateurs à explorer davantage le contenu.
    instagram viewer
  • Enfin, le défilement fluide facilite la navigation des utilisateurs, en particulier lorsqu'ils traitent de longues pages Web ou se déplacent entre différentes sections.

Pour implémenter un défilement fluide, vous pouvez modifier le comportement de défilement par défaut à l'aide de JavaScript.

Structure HTML

Tout d'abord, créez les éléments de balisage nécessaires pour les différentes fenêtres et la navigation pour défiler entre elles.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

Ce code HTML consiste en une barre de navigation contenant trois balises d'ancrage. L'attribut href de chaque ancre spécifie l'identifiant unique de la section cible (par exemple, section1, section2, section3). Cela garantit que chaque lien sur lequel vous cliquez navigue vers l'élément cible correspondant.

Style CSS

Ensuite, appliquez du CSS pour rendre la page visiblement attrayante et organisée. Ajoutez ce qui suit à style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Cela rendra les liens sous la forme d'une rangée de boutons et chaque section sous la forme d'un élément pleine hauteur. Mais remarquez comment cliquer sur un lien fait passer instantanément le navigateur à la section correspondante, sans animation.

Implémentation JavaScript

Dans d'autres cas, pour ajouter une animation fluide lorsque vous cliquez sur une balise d'ancrage, utilisez la méthode scrollIntoView(). La méthode scrollIntoView() est une méthode JavaScript intégrée de la classe Element qui vous permet de faire défiler un élément dans la zone visible de la fenêtre du navigateur.

Lorsque vous appelez cette méthode, le navigateur ajuste la position de défilement du conteneur de l'élément (comme la fenêtre ou un conteneur déroulant) pour rendre l'élément visible.

Ajoutez votre code JavaScript au script.js déposer. Commencez par écouter le déclenchement de l'événement DOMContentLoaded avant de faire quoi que ce soit d'autre. Cela garantit que le rappel ne s'exécute que lorsque le DOM est entièrement chargé et est prêt à manipuler.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Ensuite, définissez le makeLinksSmooth() fonction. Commencez par sélectionner les balises d'ancrage dans la navigation, car vous voudrez modifier leur comportement. Ensuite, parcourez chaque lien et ajoutez un écouteur d'événement pour son événement de clic.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Enfin, définissez la lisseDéfilement() fonction qui prend un objet écouteur d'événement. Appelez preventDefault() pour vous assurer que le navigateur n'exécute pas son action par défaut lorsque vous cliquez sur le lien. Le code qui suit le remplacera.

Saisissez la valeur href de la balise d'ancrage actuelle et stockez-la dans une variable. Cette valeur doit être l'ID de la section cible, avec le préfixe "#", donc utilisez-la pour sélectionner l'élément de la section via querySelector(). Si le targetElement est présent, exécutez son défiler dans l'affichage méthode et passez le comportement "lisse" dans un paramètre d'objet pour compléter l'effet.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Avec cela, votre page Web finie défilera en douceur vers chaque section lorsque vous cliquerez sur un lien :

Pour améliorer encore l'expérience de défilement fluide, vous pouvez affiner certains aspects.

Vous pouvez régler la position verticale du défilement à l'aide des bloc propriété de l'argument settings. Utilisez des valeurs telles que "début", "centre" ou "fin" pour identifier la partie de l'élément cible vers laquelle faire défiler :

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Ajout d'effets d'accélération

Appliquez des effets d'accélération à l'animation de défilement pour créer une transition plus naturelle et visuellement attrayante. Fonctions d'accélération telles que l'entrée, la sortie ou la personnalisation courbes de Bézier cubiques peut contrôler l'accélération et la décélération du mouvement de défilement. Vous pouvez utiliser une fonction de synchronisation personnalisée avec la propriété CSS scroll-behavior ou une bibliothèque JavaScript telle que "smooth-scroll" pour obtenir le même résultat.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Assurez-vous que votre implémentation de défilement fluide fonctionne de manière cohérente sur différents navigateurs. Testez et gérez les bizarreries ou les incohérences spécifiques au navigateur qui peuvent survenir.

Vous pouvez utiliser un site Web comme Puis-je utiliser pour tester la prise en charge du navigateur lors de la construction. Envisagez d'utiliser une bibliothèque JavaScript ou un polyfill pour assurer la compatibilité entre navigateurs et offrir une expérience transparente à tous les utilisateurs.

Le défilement fluide ajoute une touche d'élégance et améliore l'expérience utilisateur en créant un effet de défilement fluide et visuellement agréable. En suivant les étapes décrites dans ce guide, les développeurs Web peuvent implémenter un défilement fluide à l'aide de JavaScript.

Le réglage fin du comportement de défilement, l'ajout d'effets d'accélération et la garantie de la compatibilité entre navigateurs améliorer encore l'expérience de défilement fluide, rendant vos pages Web plus attrayantes et agréables à naviguer.