Kann ich eine CSS-Scroll-Animation nur mit einem Anker-Tag auslösen?

Erzielen einer reibungslosen CSS-Scroll-Animation

Frage:

Ist es möglich, einen CSS-Scroll auszulösen? Animation einfach durch Klicken auf ein Anker-Tag erstellen, ohne dass Eingabeschaltflächen erforderlich sind?

Antwort:

Ja, es ist möglich, eine Scroll-Animation mit CSS3 und Anker-Tags zu erreichen.

Implementierung:

Um diese Funktion zu implementieren, verwenden Sie Ankerlinks und die Scroll-Behavior-Eigenschaft für den Scroll-Container. Der folgende CSS-Regelsatz sorgt für ein reibungsloses Scrollverhalten:

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

Browser-Unterstützung:

Diese Technik wird von modernen Browsern wie Firefox 36, Chrome 61, Safari unterstützt 15.4 und Opera 48.

Beispielverwendung:

Berücksichtigen Sie den folgenden HTML- und CSS-Code:

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


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

Wenn der Benutzer auf klickt „Geh zu foo!“ Wenn Sie auf den Link klicken, scrollt der Browser reibungslos nach unten zum Element mit der ID „foo“.

Hinweis: Internet Explorer, Nicht-Chromium Edge und ältere Versionen von Safari unterstützen das Scrollen nicht -Verhalten. In diesen Browsern ist der Scrollvorgang nicht reibungslos.

Das obige ist der detaillierte Inhalt vonKann ich eine CSS-Scroll-Animation nur mit einem Anker-Tag auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!