Comment puis-je obtenir un défilement fluide avec CSS et des ancres ?

Défilement fluide avec CSS et ancres

Dans le but de créer une expérience utilisateur transparente, vous souhaiterez peut-être implémenter un défilement fluide en cliquant sur un bouton en haut d’une page. Bien qu'une solution CSS uniquement soit disponible, impliquant des boutons de saisie, nous explorons une approche alternative qui exploite les ancres.

Pour obtenir un défilement fluide, utilisez la propriété scroll-behaviour (référence MDN) pour le conteneur de défilement désigné :

<code class="css">scroll-behavior: smooth;</code>

Cette propriété est prise en charge dans les navigateurs modernes tels que Firefox, Chrome, Safari et Opera. Cependant, notez que les navigateurs comme Internet Explorer et les navigateurs non Chromium Edge ne prennent pas en charge le comportement de défilement.

Voici un exemple de la façon de mettre en œuvre ceci :

<code class="html">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>


  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</code>

En cliquant sur le bouton "Aller à foo!" lien, vous bénéficierez d'un défilement fluide jusqu'à l'élément "foo", et vice versa pour le lien "Retour en haut".

Cette approche offre un comportement de défilement pratique et fluide sans nécessiter de boutons supplémentaires.

Cette approche offre un comportement de défilement pratique et fluide sans nécessiter de boutons supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!