Anzeige
Tutorialbeschreibung

jQuery - Sanftes Scrollen

jQuery - Sanftes Scrollen

Bei sehr langen Webseiten verwendet man am besten Anker, um den Benutzern die Möglichkeit zu bieten, direkt zu der gewünschten Stelle zu springen. Das ist praktisch, schließlich müssen die Benutzer dann nicht erst lange auf der Seite scrollen. Einen Haken (oder doch zumindest kleinen Schönheitsfehler) hat die Sache allerdings: Die Sprünge passieren abrupt. Mit jQuery lässt sich das deutlich eleganter lösen. Denn hier kann man dafür sorgen, dass die Seite langsam bis zum definierten Anker gescrollt wird.


HTML bietet die Möglichkeit, Verweisanker zu definieren. Sinnvoll ist das in erster Linie, wenn man sehr lange Seiten hat. Typische Einsatzgebiete für Anker sind also lange Texte, die sich vertikal über mehrere Bildschirmseiten erstrecken. Befinden sich auf einer Seite untereinander mehrere Kapitel und man möchte zum 2. Kapitel, muss man dort nicht erst lange hinscrollen. Stattdessen klickt man auf einen entsprechenden Link und der Browser springt direkt zur gewünschten Stelle.

Bilder



Bevor gezeigt wird, wie das in HTML funktioniert und sich mittels jQuery aufpeppen lässt, noch ein allgemeiner Hinweis in dieser Sache: Normalerweise sollte man versuchen, Seiten, die sehr lang sind, auf mehrere Seiten aufzuteilen. Das klappt allerdings nicht immer bzw. ist nicht immer gewollt. Denken Sie beispielsweise an Blogs. Dort vermeidet man diese Aufteilung in aller Regel, um sich nicht vor anderen Bloggern verteidigen zu müssen, dass man die Page-Impressions dadurch künstlich in die Höhe treiben will, um mehr Werbeeinnahmen generieren zu können.

 

 

Anker definieren

Im einfachsten Fall sieht die Definition eines Ankers folgendermaßen aus:
 <h2><a name="anker">Das ist das Ziel</a></h2>

Verwendet wird hier das name-Attribut, dem der Ankername zugewiesen wird. Will man nun auf diesen Anker einen Verweis setzen, verwendet man diesen Namen mit vorangestellter Raute.
 <a href="#anker">Gehe zum Ziel</a>

Diese Syntax hat allerdings einen Haken: Sie ist veraltet. Denn seit HTML 4.01 können Anker alleine durch das Attribut id definiert werden. Das ist sinnvoll, schließlich darf eine ID innerhalb eines Dokuments tatsächlich nur einmal vorkommen.
 <h2 id="anker">Das ist das Ziel</a>

Der Verweis funktioniert dann aber genau so wie bei der "alten" Variante. Beachten Sie, dass beide Arten in den Browsern nutzbar sind. Wer allerdings die name-Variante verwendet, wird seine Webseite nicht nach XHTML validieren können.

Mit jQuery lässt sich eine Ankerdefinition noch deutlich eleganter bewerkstelligen. Denn hier ist ein animiertes Scrollen möglich. Klickt der Besucher den entsprechenden Link an, wird die Seite langsam und gemächlich zum dazugehörenden Anker gescrollt. Und dabei kann man die Geschwindigkeit, in der das Scrollen ablaufen soll, sogar explizit angeben. Bei jQuery müssen – und hier gibt es keine Unterschiede zu HTML – zunächst die Links auf die Anker definiert werden.
 <h1 id="anfang">Animiertes Scrollen mit jQuery</h1>
 <a href="#kapitel1">Kapitel 1</a>
 <a href="#kapitel2">Kapitel 2</a>
 <a href="#kapitel3">Kapitel 3</a>
 <a href="#kapitel4">Kapitel 4</a>

Das Gleiche gilt auch für die eigentlichen Anker. Im folgenden Beispiel wird dafür auf die id-Syntax gesetzt.
 <h1 id="kapitel1">Kapitel 1</h1>
 <p><a href="#anfang">Zurück zum Anfang</a></p>
 <p>Hier steht der Inhalt des 1. Kapitels</p>
 …

Um den Besuchern den Sprung an den Anfang des Dokuments zu ermöglichen, wird zusätzlich ein Link gesetzt, der auf den Dokumentbeginn zeigt. Damit sind die Vorarbeiten abgeschlossen. Weiter geht es mit der eigentlichen jQuery-Syntax.
[Beispiel anzeigen]


Zunächst das vollständige Skript, bevor dann die einzelnen Elemente noch einmal genauer unter die Lupe genommen werden.
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
 /* <![CDATA[ */

   google.load("jquery", "1.3.2");
 /* ]]> */
 </script>
 <script type="text/javascript">
 /* <![CDATA[ */                                             
 $(document).ready(function() {
 $('a[href*=#]').bind("click", function(event) {
 event.preventDefault();
 var verweisziel = $(this).attr("href");
 $('html,body').animate({
 scrollTop: $(verweisziel).offset().top
 }, 3000 , function (){location.hash = verweisziel;});
 });
 return false;
 }); /* ]]> */
 </script>

Auch hier wird wieder deutlich, dass der Umfang des Skripts sehr gering ist. Jetzt aber die einzelnen Zeilen noch einmal im Detail.
$(document).ready(function() {

Es wird dafür gesorgt, dass die Funktion tatsächlich erst dann ausgeführt wird, wenn das Dokument vollständig geladen ist.
$('a[href*=#]').bind("click", function(event) {

Weiter geht es mit den Selektoren. Denn die Funktion soll nur dann ausgeführt werden, wenn ein Hyperlink angeklickt wird, dessen Verweisziel mit einer Raute beginnt. Und das ist im aktuellen Beispiel immer dann der Fall, wenn es sich um einen Link auf einen Anker handelt. Denn der sieht bekanntermaßen immer so aus: 
 <a href="#kapitel1">Kapitel 1</a>

Über die bind()-Funktion wird der Code an das Ereignis click() der Hyperlinks gebunden. Der Code wird also dann ausgeführt, wenn einer der Rauten-Hyperlinks angeklickt wird.
event.preventDefault();

Über die vordefinierte Funktion preventDefault() wird das Standard-Event von Hyperlinks  (also ein Ankersprung) unterdrückt. Lässt man diese Funktion im aktuellen Beispiel weg, würde es nach dem Anklicken der Hyperlinks zu einem unschönen Flackern beim Scrollen kommen.
 var verweisziel = $(this).attr("href");

Um die Syntax einfacher zu gestalten, wird die Variable verweisziel deklariert, die im weiteren Verlauf des Skripts noch an zwei Stellen genutzt wird.
 $('html,body').animate({

Weiter geht es mit animate(). Darüber lassen sich Animationen realisieren. Dabei muss man angeben, wie diese Animation letztendlich aussehen soll. Dazu gleich mehr. Zunächst noch ein Hinweis zu der Angabe ('html,body'), die vor animate() notiert wurde. Hierüber gibt man an, was eigentlich animiert werden soll. Im aktuellen Beispiel handelt es sich dabei um das gesamte Dokument, also wird html notiert. Das würde auch prinzipiell ausreichen. Allerdings spielt dann der Safari nicht mit, da dieser Browser mit html nichts anfangen kann. Für den Safari muss man daher noch body angeben.
 scrollTop: $(verweisziel).offset().top

Für das eigentliche Scrollen wird scrollTop verwendet. Als Argument übergibt man den Punkt, an den gescrollt werden soll. Das soll bekanntermaßen die Position des betreffenden Ankers sein. Dessen exakte Position ermittelt man über offset(). Allerdings liest offset() die Position des Elements von oben und von links aus. Da in diesem Fall allerdings lediglich die Position von oben relevant ist, wird offset().top verwendet.
 }, 3000 );
Der Wert 3000 gibt an, wie lange das Scrollen insgesamt dauern soll. Dabei ist 3000 ein Wert in Millisekunden. Das bedeutet also, dass die Animation bei einem angegebenen Wert von 3000 insgesamt drei Sekunden dauert. Hier müssen Sie einfach etwas damit experimentieren, welche Dauer bei Ihrer Webseite am besten passt.


Fazit

Auch dieses Beispiel hat es wieder gezeigt, dass man mittels jQuery mit erstaunlich wenig Aufwand interessante Ergebnisse erzielen kann. Ein paar wenige Zeilen Code genügen, um das Standardverhalten der Browser beim Scrollen aufzubrechen.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von spenderorgan
  • 10.08.2011 - 12:05

danke, hat mir sehr geholfen

Portrait von GELBGRUEN
  • 10.08.2010 - 14:58

GENIAL!!! bzw einen fehler gibts bei mir, opera findet das weiche scrollen nicht ganz so schoen, jemand ne idee wie man das ganze loest?

Portrait von dragongrafix
Portrait von Janine17
  • 30.06.2010 - 15:50

Gutes Tutorial..ich suche was anderes:-)

Portrait von Bibigon
  • 24.06.2010 - 17:23

Vielen Dank! Hat mir sehr weiter geholfen.

Portrait von klein666
  • 20.12.2009 - 14:02

sehr gutes tutorial.......

Portrait von Rembremerding
Portrait von Pfoto76
  • 18.12.2009 - 11:10

Danke mal wieder! Sehr faszinierende Sache..

Frage:
$('html,body').animate({
scrollTop: $(verweisziel).offset().top
}, 3000 , function (){location.hash = verweisziel;});
});
Für was steht die letzte Funktion?
Gibt die im Idealfall einfach ein "Wahr" zurück und ermöglicht nur dann das Ausführen der Animation?
Gruß Jürgen

Portrait von websmurf
  • 18.12.2009 - 09:38

Gut erklärt! Finde ich bei langen Seiten sehr hilfreich. Die aprupten Sprünge der HTML-Anker Navigation machen eine Orientierung auf der Seite schwierig. Man erkennt nicht ob man weit oben oder unten gelandet ist. Mit dem Scrolling behält man den Überblick.

Portrait von Proggi_Berlin
  • 18.12.2009 - 08:20

Herzlichen Dank für dieses Tutorial :-)

Portrait von Nerosmeel
  • 16.12.2009 - 13:23

einmal mehr zeig sich jQuery ist ein verdammt cooles Javascript Framework ^^

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.12.2009 - 23:51

Super Tutorial;) Kannte event.preventDefault() noch nicht... hat mir bei nem Problem sehr weitergeholfen;)

Portrait von Daniel_Knecht
  • 15.12.2009 - 07:59

Werd ich später mal ausprobieren :) Danke!

x
×
×