Glattes Scrollen in JavaScript
In diesem Artikel wird erläutert, wie Sie die Smooth-Scroll-Funktion in JavaScript verwenden. Für das Beispiel werden wir Ereignisse erstellen, die die Bildlauffunktion aufrufen.
Um das Navigationserlebnis innerhalb der Seite zu verbessern, verwenden wir Smooth Scrolling, ein Muster der Benutzeroberfläche. Es ist die animierte Positionsänderung innerhalb des Bildlauffeldes der Seite.
Es gibt mehrere Möglichkeiten, dieses Bildlaufmuster mit Hilfe von JavaScript, jQuery und jedem anderen Plugin zu erstellen und zu implementieren, aber im Moment werden wir JavaScript mit jQuery-Lösung für diese Funktion verwenden.
Glattes Scrollen in JavaScript
In JavaScript können wir eine Funktion für ein Klickereignis aufrufen, die die aktuelle Position einer Webseite ändert und animiert zu einer anderen Position navigiert.
Es gibt eine Standardmethode animate() in jQuery, um das Objekt von seiner enthaltenden Position mit scrollTop, Millisekunden als Timer und einer Rückruffunktion, die aufgerufen wird, nachdem das Scrollen abgeschlossen ist, zu übergeben.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// smooth scrolling function on anchor tag
$("a").on('click', function(event) {
// if this.hash contain value
if (this.hash !== "") {
//default anchor click prevention
event.preventDefault();
// save hash
var myHash = this.hash;
// jQuery animate() method to call scroll
// 1200 milliseconds takes to scroll to the desired area
$('html, body').animate({
scrollTop: $(myHash).offset().top
}, 1200, function(){
// when done scroll add # to URL
window.location.hash = myHash;
});
} // End if
});
});
</script>
<style>
#section_top {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
#section_down {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
</style>
</head>
<body>
<h1>Delftstack learning</h1>
<h4>Smooth scrolling using JavaScript.</h4>
<div class="main" id="section_top">
<h2>Top Section</h2>
<a href="#section_down">Click here to Smooth Scroll to down Section</a>
</div>
<div class="main" id="section_down">
<h2>Down Section</h2>
<a href="#section_top">Click here to Smooth Scroll to top Section</a>
</div>
</body>
</html>
Im obigen HTML-Quellcode haben wir mehrere Abschnitte mit <div>-Elementen von HTML und CSS erstellt. Wir haben IDs für die Abschnitte definiert, um die Position zu ändern und das Styling zu implementieren.
Wir haben in beiden Abschnitten ein Anker-Tag erstellt und diesem Element href zugewiesen. Am Kopf der HTML-Seite haben wir einen jQuery-Link eingefügt, um die jQuery-Standardmethode animate() zu verwenden.
Wir haben die Scrollfunktion beim Klick auf das Anchor-Tag im Script-Tag aufgerufen. Innerhalb der Scroll-Funktion müssen wir den Hash-Wert überprüfen; Wenn es einen Wert hat, dann fahre mit der Ausführung fort.
Wir haben das Standardverhalten des Anchor-Tags verhindert und den aktuellen Hash gespeichert. Wir haben die jQuery-Funktion animate() mit 1200-Millisekunden-Timer und gewünschter Scroll-Position aufgerufen.
Sie können die obige Quelle mit einer HTML-Erweiterung speichern und sie in einem beliebigen Browser öffnen, um das Ergebnis des reibungslosen Scrollens zu sehen.