Wie kann ich mit CSS und Ankern reibungsloses Scrollen erreichen?-CSS-Tutorial-php.cn

Wie kann ich mit CSS und Ankern reibungsloses Scrollen erreichen?

Barbara Streisand

Freigeben： 2024-10-29 18:24:02

Original

270 Leute haben es durchsucht

How Can I Achieve Smooth Scrolling with CSS and Anchors?

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!