Comment implémenter un défilement fluide en JavaScript : un guide pour les développeurs Web

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 au sein d'une page Web en animant le mouvement de défilement au lieu du saut brusque par défaut.

Ce guide complet destiné aux 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 accéder 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 :

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

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

Ce code HTML se compose d'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 dirige vers l’élément cible correspondant.

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

Cela affichera 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 le fait de cliquer sur un lien fait passer instantanément le navigateur à la section correspondante, sans animation.

Autrement, 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 (tel que la fenêtre ou un conteneur déroulant) pour rendre l'élément visible.

Ajoutez votre code JavaScript auscript.js déposer. Commencez par écouter l'événement DOMContentLoaded se déclencher avant de faire autre chose. Cela garantit que le rappel ne s'exécute que lorsque le DOM est entièrement chargé et prêt à être manipulé.

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

Enfin, définissez lesmoothScroll() fonction qui prend un objet écouteur d'événement. Appelez PreventDefault() pour vous assurer que le navigateur n'effectue 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 "#", utilisez-la donc pour sélectionner l'élément de la section viasélecteur de requête() . Si le targetElement est présent, exécutez sondéfiler dans l'affichageet transmettez le comportement « fluide » dans un paramètre d’objet pour compléter l’effet.

Avec cela, votre page Web terminée défilera facilement 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 ajuster la position verticale du défilement à l'aide du boutonbloc 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 :

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

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