Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

Scroll Top Link (Einleitung)

Von Matu am 26. Mai, 2009 (01:15 Uhr) unter Kategorie: Javascript, WordPress

In diesem Tutorial möchte ich erklären, wie ein Scroll Top Link in die Webseite integriert werden kann.

Ein Scroll Top Link ermöglich es den Besuchern, nachdem sie die Seite fertig gelesen haben, bequem an den Seitenanfang zurück zu gelangen, ohne den Scrollbalken (oder die Nach-Oben-Taste) benutzen zu müssen. Dies gehört zum Usability und sollte auf keiner Seite fehlen, die viel Content und somit lange Seiten enthält. Dadurch wird dem Benutzer das Durchforsten der Webseite erleichert.

Dies kann auf 2 Arten realisiert werden. Bei der ersten springt die Seite direkt zum Anfang (Top) der Seite. Bei der zweiten Variante erfolgt dies animiert durch Javascript, dabei scrollt bzw. gleitet die Seite bis nach oben. Letzteres sieht elegant (smooth) aus und wird ihnen gefallen. Es erfordert jedoch aktiviertes Javascript im Browser.
Der Scroll Top Link in diesem Tutorial beinhaltet beide Möglichkeiten, funktioniert also mit (animiert ) wie auch ohne Javascript. Javascript-Funtionalitäten sollten stets eine Alternative bieten. Vor allem dann, wenn grundsätzliche Dinge wie zum Beispiel das Menü damit realisiert werden.

Da sich der Scroll-Top Link im unteren Bereich der Webseite befindet, bietet es sich an, diesen im Footer zu platzieren. Unter Wordpress wäre dieser in der (/wp-content/theme/dein_theme/) footer.php zu finden. Da in meiner Seite der Footer sehr schmall ist, habe ich den Scroll Top Link in der index.php nach den Loop gesetzt (… unter den Textbereich). Es besteht aber auch die Möglichkeit, den Link ständig im Blickwinkel (position:fixed) anzuzeigen. Dieser kann zum Beispiel automatisch eingeblendet werden, sobald der Benutzer beginnt nach unten zu scrollen.

Ob man sich für ersteres oder letzteres entscheidet, wird letztendlich durch die Zuweisungen im (Cascading) Stylesheet definiert. Dafür wird dem Link eine ID zugewiesen, über die er angesprochen werden kann.

<html>
<head>
<title>Scroll Top Link</title>
 </head>
<body>
<div id=“container“ >
	<div id=“header“>...</div>
	<div id=“navi“>...</div >
	<div id=“content“>...</div >
	<div id=“footer“>
        <a href=“#“ id=“top“ title=“Nach oben“ > </a> 
	</div>
</div>
</body>
</html>

Der so eingefügte Scroll Top Link wäre in dieser Variante bereits voll funktionsfähig. Es fehlt lediglich noch der Text (Nach oben) oder aber eine Grafik. Ein Beispiel dafür sieht man unten auf dieser Seite.
Im Internet finden sich teilweise Anleitungen, bei denen ein Anker im Header der Seite platziert wird:

<a name=“top“> </a>

Dieser wird dann über den Scroll Top Link angesprochen/ aufgerufen, um nach oben zu gelangen:

… <a href=“#top“ title=“Nach oben“ > </a> …

Oder der Header wird über die ID angeprochen:

… <a href=“#header“ title=“Nach oben“ > </a>  …

Eine weitere Lösung implementiert Javascript direkt im href-Attribut des a-Tags:

… <a href=“javascript:scroll(0,0)“ title=“Nach oben“ > </a> …

Welche Möglichkeit eingesetzt wird ist Geschmacksache. Die hier gezeigte Variante über href=“#“ ist wohl die einfachste. Letztere funktioniert nur bei aktiviertem Javascript und sollte vermieden werden.

Kommen wir nun nun zu unserer animierten Scroll Top Funktion.
Um diese zu realisieren, besteht die Möglichkeit, selbstständig etwas in Javascript zu programmieren oder aber ein Javascript-Framework einzusetzen. Neben Mootools, Script.aculo.us, Prototype, Dojo und anderen verweise ich hier auf jquery.

Dieses schlanke Framework hat sich etabliert und bietet eine große Anzahl unterschiedlichster Funktionen, um eine Webseite ansprechend gestalten zu können.
Um jquery nutzen zu können, muss das Framework zunächst in die Webseite integriert werden. Ich werde dies Schritt für Schritt erklären, damit auch Nutzer mit weniger oder keinen Kenntnissen zum Ziel gelangen.
Für den einfachen Weg binden Sie jquery direkt über die Herstellerseite von jquery oder über googleapis im Header Ihrer Seite ein:

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery Herstellerseite -->
<script src=‘http://code.jquery.com/jquery-latest.js‘ type=‘text/javascript‘></script>

<!-- ... oder googleapis -->
<script src=‘http://ajax.googleapis.com/ajax/lips/jquery/1.3.2/jquery.min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Für welche Quelle man sich dabei entscheidet ist wurscht. Ich bevorzuge die dritte Möglichkeit, in dem man sich die neueste jquery-Version von der Webseite des Herstellers herunterladet und in einem Ordner auf seinem eigenen Webspace entpackt. Diese bindet man anschließend wie eine von den beiden erstgenannten Möglichkeiten im Header der eigenen Webseite ein:

<!-- Lokal vorliegende jquery-Version einbinden -->
<script src=‘http://meinedomain.de/pfad_zum_ordner/jquery-min.js‘ type=‘text/javascript‘></script>

So fühle ich mich einfach wohler, zumal die Dateigröße von jquery nicht ins Gewicht fällt. Für Unerfahrene ist die Einbindung über eine der beiden erstgenannten Wege eventuell empfehlenswerter, da unproblematischer.
Nachdem das Framework nun verfügbar ist, stehen uns mehrere Möglichkeiten für das ScrollTop-Ereignis zur Verfügung

  • Wir verwenden die schon vorhandene Animate-Funktion in Verbindung mit der scrollTop-Eigenschaft und schreiben uns eine eigene Funktion
  • Wir verwenden jQuery.ScrollTo von Ariel Flesler (Demo)
  • Wir verwenden kein Framework und programmieren uns unsere eigene ScrollTop-Funktion

Ich werde auf alle drei Möglichkeiten eingehen … allerdings zeigt die Uhr gerade 01:11 Uhr an und es wird Zeit ins Bett zu gehen. Ich wünsche eine gute Nacht, morgen geht es weiter!

Scroll Top Link (Teil 1)

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4,67 out of 5)
Loading ... Loading ...

Deine Meinung ist mir wichtig!

Es besteht die Möglichkeit, Kommentare nachträglich innerhalb einer Zeitspanne von 5 Minuten zu ändern (Keine werblichen Kommentare)
Jeder 1. Kommentar muss freigeschaltet werden!

Smileys:spy:

Nach oben