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 (Teil 2)

Von Matu am 30. Mai, 2009 (21:22 Uhr) unter Kategorie: Javascript, WordPress

Wie angekündigt nun der Scroll Top Link mit der jQuery.scrollTo-Funktion von Ariel Flesler (… hier noch mal die Demo-Seite) .

Hierzu laden wir uns zunächst die neueste Version (momentan scrollTo-1.4.2) besagter scrollTop-Funktion herunter.
Dann entpacken wir die gezippte Datei in einen beliebigen vorher erstellten Order auf unserem PC und schieben die nun verfügbare Javascript-Datei auf unseren Webspace. Bei lokal installiertem Webserver in das entsprechende Verzeichnis auf unserem Rechner … zum Beispiel beim xampp in “c:/xampp/htdocs/…/scrollto-1.4.2-min.js“.
Anschließend folgt fast die gleiche Prozedur, die schon im ersten Teil beschrieben wurde. Unter der bereits eingefügten jquery.js im Head-Bereich Ihrer Webseite binden wir zunächst die soeben heruntergeladene scrollTo.js ein.

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

<!-- ... und die scrollTo.js -->
<script src=‘http://ihre_domain.de/wp-content/themes/ihr_theme/js/jquery.scrollTo-1.4.2-min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Anschließend öffnen wir wieder einen Editor unserer Wahl und erstellen eine Datei mit folgendem Inhalt:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */
/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(event){
        /* ... unterdrücke die normale Funktion des a-Tags  ... */
        event.preventDefault();
        /* ... und scrolle nach oben! */
        $.scrollTo( 0, 4000);
        /* ... hier wird jetzt anstatt der animate-Funktion
            aus dem ersten Teil die scrollTo-Funktion eingefügt */
   });
});
/*]]>*/

Diese speichern Sie dann wieder, wie in Teil 1 beschrieben, unter einem beliebigen Namen ab und ermöglichen den Zugriff, in dem Sie diese wiederum in Head-Bereich einbinden.

(Hinweis)
Da ich davon ausgehe, dass Sie in Zukunft noch weitere Javascript-Funktionen verwenden werden, erstellen Sie sich einfache eine main.js, in der Sie alle weiteren zukünftigen Funktionen zusammenfassen:

 /* ### MEINE JAVASCRIPT FUNKTIONEN ### */
 /* --- SCROLLTO --- */
$(document).ready(function(){
   $('a#top').click(function(event){
        event.preventDefault();
        $.scrollTo( 0, 4000);
   });
});
 /* --- SCROLLTO ENDE --- */

 /* --- WEITERE FUNKTION --- */ /* --- WEITERE FUNKTION ENDE --- */

Diese wird lediglich einmal angelegt, beinhaltet all Ihre Funktionen, ist gut überschaubar und kann beliebig erweitert werden!

Wenn Sie den ersten Teil gelesen haben, dann werden Sie spätestens jetzt gemerkt haben, dass kein großer Unterschied zu diesem Scroll Top Link besteht. Nur dass bei diesem noch eine weitere Javascript-Datei herunter geladen und eingebunden werden muss.
Allerdings bietet die hier eingebundene scrollTo.js noch weitere Möglichkeiten zum animierten Scrollen, wie auf der Demo-Seite ersichtlich ist (hierfür ist die vollständige 8 KB-Version nötig).


Aber so schön diese auch anzusehen sind … mir ist der Sinn noch nicht so ganz klar geworden ist. Ein Einsatz wäre für mich eventuell bei einer Bildergallerie nützlich, um über ein Menü ein bestimmtes Bild anzusteuern.
Ein Unterschied besteht aber: Diese Scroll-Funktion passt sich der Seitenlänge an, wie ich beobachten konnte. Bei kurzen Seiten mit wenig Text wird langsamer gescrollt als bei längeren Seiten mit mehr Textinhalt, obwohl wie bei der animate-Funktion die Scroll-Geschwindigkeit festgelegt wurde.
Ich setze auf dieser Seite die hier vorgestellte Version ein, allerdings lässt sich die animate-Funktion mindestens genauso gut anpassen. Hierzu müssten lediglich einzelne animate-Funktionen gekoppelt werden. Die erste scrollt schnell bis zu einer vorgegebenen Stelle, zum Beispiel 300 Pixel unter dem oberen Rand. Anschließend folgt eine weitere animate-Funktion und scrollt etwas langsamer bis 200 Pixel unter dem oberen Rand usw.!

 /* Angepasstes Scrollen */
...
 $('html, body') .animate({scrollTop:300}, 2000).animate({scrollTop:200}, 2300).animate({scrollTop:100}, 2600).animate({scrollTop:0}, 3000);
...

Je näher ich mir das momentan anschaue, umso mehr gelange ich zu der Einsicht, nur noch die animate-Funktion einzusetzen und meinen Bedürfnissen anzupassen (wie dies bereits beim Videomodus geschehen ist).
Entscheiden Sie für sich selber, welche Möglichkeit Sie nutzen möchten!

Im folgenden dritten Teil zeige ich noch eine komplett eigenständig programmierte Version… ohne jquery und ohne die hier vorgestellte scrollTop.js!
Da ich persönlich noch weitere auf jquery basierende Funktionen auf meiner Seite implementiert habe, kommt dies für mich nicht in Betracht. Aber ich denke, dass der eine oder andere, der nur wenig Javascript auf seiner Seite einsetzt, seinen Nutzen daraus ziehen kann. Zudem lassen sich so einige KB sparen …!

Scroll Top Link (Teil 3)

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5,00 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