Wie kann ich mit CSS und Ankern reibungsloses Scrollen erreichen?

Reibungsloses Scrollen mit CSS und Ankern

Um ein nahtloses Benutzererlebnis zu schaffen, möchten Sie möglicherweise ein reibungsloses Scrollen beim Klicken auf a implementieren Schaltfläche oben auf einer Seite. Während eine reine CSS-Lösung mit Eingabeschaltflächen verfügbar ist, untersuchen wir einen alternativen Ansatz, der Anker nutzt.

Um einen reibungslosen Bildlauf zu erreichen, verwenden Sie die scroll-behavior-Eigenschaft (MDN-Referenz) für den angegebenen Bildlaufcontainer:

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

Diese Eigenschaft wird in modernen Browsern wie Firefox, Chrome, Safari und Opera unterstützt. Beachten Sie jedoch, dass Browser wie Internet Explorer und Nicht-Chromium Edge das Scrollverhalten nicht unterstützen.

Hier ist ein Beispiel für die Implementierung:

<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>

Nachdem Sie auf „Gehe zu“ geklickt haben, klicken Sie auf „Gehe zu“. foo!" Wenn Sie auf den Link „Foo“ klicken, scrollen Sie sanft nach unten zum „foo“-Element und umgekehrt.

Dieser Ansatz sorgt für ein bequemes und reibungsloses Scrollverhalten, ohne dass zusätzliche Schaltflächen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und Ankern reibungsloses Scrollen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!