Wie erstelle ich: flüssige Scrollbewegung
Lernen Sie, wie Sie mit CSS flüssige Scroll-Effekte erstellen.
Glatter Scrollen
Section 1
Klicken Sie auf mich, glatter Scrollen zum unteren Teil 2.Klicken Sie auf den Link, um das "glatte" Scrollen zu sehen.
Hinweis:Entfernen Sie das scroll-behavior-Attribut, um das glatte Scrollen aufzuheben.
Glatter Scrollen
Fügen Sie für das <html>-Element hinzu scroll-behavior: smooth Full-page smooth scrolling kann aktiviert werden:
Hinweis:Es kann auch zu bestimmten Elementen/Scroll-Containern hinzugefügt werden.
Beispiel
html {
scroll-behavior: smooth;
}
Browser-Unterstützung
Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Browserversion, die die Scroll-Verhaltensattribut vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
Cross-Browser-Lösungen
Für Browser, die nicht scroll-behavior Browsertypen, können Sie JavaScript oder JavaScript-Bibliotheken (wie jQuery）um eine Lösung für alle Browser zu erstellen：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Ensure that this.hash has a value before overriding the default behavior
if (this.hash !== "") {
// Prevent the default anchor click behavior
event.preventDefault();
// Store hash value
var hash = this.hash;
// Use jQuery's animate() method to add smooth page scrolling
// Optional number (800) specifies the milliseconds required to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Nach dem Abschließen des Scrolleffekts wird das Hash (#) der URL hinzugefügt (Standardklickverhalten)
window.location.hash = hash;
);
} // Ende if
);
);
</script>
