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

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

Barbara Streisand

Libérer： 2024-10-29 18:24:02

original

273 Les gens l'ont consulté

How Can I Achieve Smooth Scrolling with CSS and Anchors?

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>

Copier après la connexion

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"><head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

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

Copier après la connexion

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.

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!