jQuery: Sanft nach unten auf einer Seite scrollen
Tipp von Stefan Trost | 13.07.2012 um 11:49
Um auf einer Website nach unten zu scrollen, verwendet man normalerweise Anchor-Links. Klickt man auf solch einen Link, springt die Ansicht allerdings unmittelbar nach unten.
Wer es etwas schöner und geschmeidiger haben möchte, kann folgenden jQuery Code verwenden:
$("html, body").animate({scrollTop:$(document).height()}, 800);
Wird dieser JavaScript Code ausgeführt, scrollt die Seite wie von selbst sanft nach unten. Mit dem letzten Parameter (hier "800") lässt sich die Geschwindigkeit des Scrollens bestimmen. Verwenden Sie hier einfach einen beliebigen Zahlenwert, wie es Ihnen am schönsten erscheint.
Beispiel
Zuletzt ein Beispiel. Wir möchten, dass alle Links auf unserer Seite mit der Klasse "tobottom" mit unserem Code von oben versehen werden. Einer unserer Links könnte so aussehen:
<a href="#" class="tobottom">Nach unten scrollen</a>
Danach verbinden wir alle Links dieser Art mit dem Code:
$(document).ready(function() { $(".tobottom").click(function(){ $("html, body").animate({scrollTop:$(document).height()}, 800); return false; }); });
Wir schreiben noch "return false" in den Code, damit die Standardaktion des Links (Link folgen) nicht ausgeführt wird.
JavaScript deaktiviert?
Unser Beispiel funktioniert nur dann, wenn der Besucher unserer Seite auch JavaScript aktiviert hat. Wie es auch mit deaktiviertem JavaScript funktioniert, zeige ich 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 oben 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
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
JavaScript: Bereich durch Link aufklappen und zuklappen
Tutorial | 3 Kommentare
PHP: target="_blank" zu (ausgehenden) HTML Links hinzufügen
Tipp | 0 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.