Sanftes Scrollen zum Seitenanfang mit jQuery umsetzen

Für Einsteiger ist jQuery zumeist etwas schwer erlernbar und zu verstehen. Dennoch gibt es Dinge, die sich mit ganz wenig Programmieraufwand umsetzen lassen. Eine solche Sache ist beispielsweise das sanfte Scrollen zum Seitenanfang, welches häufig auf Webseiten, Blogs etc. anzutreffen ist. Viele Seitenbetreiber setzen hierfür auf Plugins oder relativ viele Code-Zeilen. Ich zeig euch, dass das nicht sein muss und eigentlich ganz einfach ist.

Mit dem folgenden Snippet geht’s

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.CLASS').click(function(){
$("html, body").animate({ scrollTop: 0 }, SPEED);
return false;});
});</script>

Verwendet ihr bereits jQuery auf eurer Webseite, dann benötigt ihr die erste Zeile nicht. Sonst würde jQuery doppelt eingebunden werden.

<a class="CLASS" href="#top">zum Seitenanfang</a>

Die Angabe CLASS ersetzt ihr nun durch die betreffende CSS-Klasse. In vielen Fällen wird es beispielsweise die Bezeichnung top sein. Handelt es sich um eine ID, muss der Punkt(.) in eine Raute(#) geändert werden. Mit SPEED wird die Scrollgeschwindigkeit festgelegt. Übliche Werte wären hier 600 oder 800. Umso höher der Wert, desto länger dauert der Vorgang.

Sollte der Fall eintreten, dass die Sprungmarke auf die Startseite verlinkt, dann muss entweder mit einem erweiterten jQuery-Code oder dem PHP-Array $_Server nachgeholfen werden. Das war es im Prinzip schon. Einfach, oder?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.