Comment créer : défilement en douceur

Comment apprendre à utiliser CSS pour créer des effets de défilement en douceur.

Défilement en douceur

Défilement en douceur

Ajoutez pour l'élément scroll-behavior: smooth Il est possible d'activer un défilement en douceur pour toute la page :

Remarque :Vous pouvez également l'ajouter à un élément spécifique ou à un conteneur de défilement.

Exemple

html {
  scroll-behavior: smooth;
}

Essayer personnellement

Support du navigateur

Les numéros dans le tableau indiquent la première version de navigateur qui prend en charge complètement l'attribut de comportement de défilement.

Solution cross-browser

Pour les navigateurs qui ne supportent pas scroll-behavior Les navigateurs avec l'attribut jQueryPour créer une solution applicable à tous les navigateurs :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Ajouter un défilement en douceur pour tous les liens
  $("a").on('click', function(event) {
    // Assurez-vous que this.hash a une valeur avant de surcharger le comportement par défaut
    if (this.hash !== "") {
      // Empêcher le comportement par défaut du clic sur l'ancrage
      event.preventDefault();
      // Stocker la valeur de l'hash
      var hash = this.hash;
      // Utilisez la méthode animate() de jQuery pour ajouter un défilement de page en douceur
      // Numéro optionnel (800) spécifiant le nombre de millisecondes nécessaires pour faire défiler vers la zone spécifiée
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Après avoir effectué le défilement, ajoutez le hashtag (#) à l'URL (comportement par défaut en cliquant)
        window.location.hash = hash;
      });
    } // Fin du if
  });
});
</script>

Essayer personnellement

Pages associées

Manuel de référence :Propriété CSS scroll-behavior