Heim >Web-Frontend >CSS-Tutorial >Kann ich eine CSS-Scroll-Animation nur mit einem Anker-Tag auslösen?
Kann ich eine CSS-Scroll-Animation nur mit einem Anker-Tag auslösen?
- Linda HamiltonOriginal
- 2024-10-30 00:49:29335Durchsuche
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"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
</body></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!