Webdesign-Basics: Smooth Scroll mit jQuery

Bei einseitigen Websites oder längeren Blogbeiträgen ist es für den Benutzer besonders komfortabel, wenn er mithilfe von Sprungmarken an die richtige Stelle auf der Website navigieren kann. Die Links sind schnell und einfach in HTML eingebettet, aber der Browser springt abrupt zu den referenzierten Stellen.

Dieser Sprung kann für den Benutzer verwirrend sein, da er nicht weiß, wo er sich auf der Seite befindet oder ob eine neue Seite geladen wurde. Um die Benutzererfahrung zu verbessern, gibt es smooth Scroll. Smooth Scroll ist eigentlich eine Animation, die beim Anklicken des Links ausgeführt wird und die Seite automatisch an die richtige Stelle scrollt.

Die Umsetzung des smooth Scroll mit jQuery

Es gibt verschiedene Möglichkeiten, smooth Scroll zu implementieren. Auch mithilfe von CSS ist es möglich, einen smooth Scroll zu implementieren. CSS bietet jedoch nicht viel Kontrolle über die Animation. Außerdem werden die CSS-Methoden für smooth Scroll nicht von allen Browsern unterstützt. Für eine geräteübergreifende Website sollte entweder auf Plug-ins oder JavaScript zurückgegriffen werden, wobei sich die jQuery Library besonders anbietet.

Mit jQuery ist es ausgesprochen einfach, mit nur wenigen Codezeilen einen smooth Scroll-Effekt zu erzielen. Die jQuery-Methode scrollTop() wird verwendet, um zu einem bestimmten Bereich der Seite zu scrollen – nicht nur nach oben, wie der Name vermuten lässt. Durch Animieren von scrollTop() mit der Funktion animate() kann das Scrollen flüssiger gestaltet werden.

jQuery auf die Seite laden

Um jQuery verwenden zu können, muss es zunächst auf die Seite geladen werden. Dies geschieht durch einen Verweis auf die Bibliothek im Head des HTML-Codes. JQuery kann sowohl von dem Server geladen werden, auf dem die Website gehostet wird, als auch von fremden Servern. Hier ist ein Beispiel, wie eine jQuery-Version von der offiziellen Website eingebunden werden kann:

<script type="text/javascript" src=https://code.jquery.com/jquery-3.7.1.js integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

Hinweis: Die Attribute integrity und crossorigin werden für die Subresource Integrity Prüfung verwendet. Sie sind optional, werden aber empfohlen. Dadurch kann der Browser sicherstellen, dass die auf Drittservern gehosteten Ressourcen nicht manipuliert wurden.

Die richtige HTML-Struktur

Zuerst muss sichergestellt werden, dass jeder Abschnitt auf der Seite eine eindeutige ID hat. Nur so ist es möglich, ihn mit dem HTML-Code gezielt anzusprechen. Im folgenden Codebeispiel wird dies erreicht, indem jeder href-Wert der Abschnitts-ID entspricht.

<ul id="nav">  <li><a href="#bsp1>Beispiel" 1</a></li>  <li><a href="#bsp2>Beispiel" 2</a></li>  <li><a href="#bsp3>Beispiel" 3</a></li>
</ul> <section id="bsp1">  <h2>Beispiel 1 Section</h2> </section>
<section id="bsp2">  <h2>Beispiel 2 Section</h2> </section>
<section id="bsp3">  <h2>Beispiel 3 Section</h2> </section>

Smooth Scroll mit jQuery

Der folgende Codeschnipsel für smooth Scrolling kann direkt in einen HTML-Code eingebunden werden. Dies ist jedoch eher für einseitige Websites zu empfehlen. Bei größeren Websites sollte der JavaScript-Code in eine eigene JavaScript-Datei geschrieben werden, auf die dann im HTML-Code verwiesen wird. Bei Smooth Scroll mit jQuery ist darauf zu achten, dass kein weiterer Code das Scrollverhalten beeinflusst.

<script> $(document).ready(function() {
 $('#nav a').on('click', function(event) {
 event.preventDefault(); 
 var target = $(this).attr('href');

 $('html, body').animate({
 scrollTop: $(target).offset().top
 }, 1000, "linear"  );
 });
 }); </script>

Der JavaScript-Code erklärt:

Da HTML von oben nach unten interpretiert wird, muss zunächst sichergestellt werden, dass der jQuery-Block wartet, bis die Seite vollständig geladen ist. Dies geschieht in der ersten Zeile des Codes:

$(document).ready(function() { });

Die Funktionen function(event) und event.preventDefault() sorgen dafür, dass beim Anklicken von Links kein Hash wie www.example.com#bsp1 angezeigt und die Link-Funktionalität deaktiviert wird.

Die Variable target verweist auf den aktuellen Link, der gerade angeklickt wurde, und holt sich mit attr('href') dem HTML-Attribut href.

Die animate-Funktion scrollt dann zu dem Abschnitt target. Die 1000 in der animate-Funktion ist die Geschwindigkeit in Millisekunden, mit der die Animation abläuft. Bei 1000 ms dauert die Animation also eine Sekunde. Die Standardgeschwindigkeit beträgt 400 ms. Zusätzlich können hier auch die Strings slow und fast stehen, wobei slow 600 ms und fast 200 ms ist.

Neben der Geschwindigkeit der gesamten Animation gibt es bei der animate-Funktion noch eine Easing-Funktion, im Beispiel linear. Die Easing-Funktion bestimmt die Geschwindigkeit, mit der die Animation an verschiedenen Punkten innerhalb der Animation fortschreitet. Linear bedeutet hier, dass die Animation an jedem Punkt gleich schnell abläuft. Die Standard-Easing-Funktion in jQuery heißt swing, sie beginnt und endet langsamer und läuft in der Mitte der Animation schneller ab. Weitere Animationen können über Plug-ins hinzugefügt werden.

Weitere Möglichkeiten

Mit jQuery ist es sehr einfach, einen Smooth Scroll-Effekt auf einer Website zu erzeugen. Der Code kann auch leicht geändert werden, um den smooth Scroll zum Beispiel für einen „Zurück nach oben“-Button zu verwenden. Auch der Trigger click kann problemlos verändert und zum Beispiel durch load ersetzt werden. So kann bereits beim Laden der Website ein smooth Scrolling aktiviert werden, wenn der Nutzer direkt zu einem bestimmten Bereich der Seite gelangen soll.