jQuery: Sanft nach oben auf einer Seite scrollen
Tipp von Stefan Trost | 13.07.2012 um 12:09
Normalerweise verwendet man Anchor-Links, um innerhalb der selben Seite einer Webseite weiter nach oben oder nach unten zu springen. Klickt man auf einen solchen Anchor-Link, springt die Seite allerdings unmittelbar auf den entsprechenden Punkt, was man etwas schöner und geschmeidiger gestalten kann, zum Beispiel mit folgendem jQuery Code:
$("html, body").animate({scrollTop:0}, 800);
Wenn dieser JavaScript Code ausgeführt wird, bewegt sich die Ansicht wie von selbst sanft und geschmeidig nach oben. Der letzte Parameter (hier auf 800 gesetzt), gibt die Dauer des Scrollens in Millisekunden an. Umso höher der Wert, umso langsamer wird gescrollt. Sie können hier - je nach Belieben - einen anderen Zahlnwert angeben.
Beispiel
Wir wollen uns das Prozedere in einem Beispiel ansehen. Auf unserer Seite möchten wir alle Links, die wir mit der Klasse "totop" versehen haben, mit unserem Code verbinden.
Hier ist einer unserer Links:
<a href="#" class="totop">Ganz nach oben scrollen</a>
Und hier unser jQuery-JavaScript Code:
$(document).ready(function() { $(".totop").click(function(){ $("html, body").animate({scrollTop:0}, 800); return false; }); });
Damit bekommen alle Elemente mit der Klasse "totop" die Funktion zugewiesen. Das "return false" darf man nicht vergessen, denn das sorgt dafür, dass die Standardaktion (dem Link folgen) nicht mehr ausgeführt wird.
JavaScript deaktiviert?
Leider funktioniert dieser Vorgang nur, wenn der Nutzer auch JavaScript aktiviert hat. Wie wir den anderen Nutzern auch die Möglichkeit geben, erfahren Sie in diesem Tipp.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
jQuery: Nach unten und nach oben scrollen mit und ohne JavaScript
Tipp | 0 Kommentare
jQuery: Sanft nach unten auf einer Seite scrollen
Tipp | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
jQuery: Durch Klick auf Links DIV-Inhalt laden und ersetzen
Tutorial | 6 Kommentare
PHP: target="_blank" zu (ausgehenden) HTML Links hinzufügen
Tipp | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
JavaScript: Bereich durch Link aufklappen und zuklappen
Tutorial | 5 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.