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 1)

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

Nachdem wir nun in der Einleitung zu diesem Tutorial das jquery-Framework eingebunden haben, erstellen wir als nächstes eine eigene Scroll Top Funktion, die auf der jquery-Funktion animate aufbaut.

Dazu öffnen wir zunächst eine neue Datei in einem Editor (zum Beispiel Notepad++) und kopieren folgenden Quellcode hinein:

/*<![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(){
        /* ... entferne das href-Attribut ... */
        $(this).removeAttr('href');
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Der Quelltext dürfte sich durch die eingefügten Kommentare selbst erklären.
Das href-Attribut wird durch die removeAttr-Funktion entfernt, da die Seite sonst beim Betätigen des Scroll Top Links erst zum Top der Webseite springen würde, um dann anschließend (wieder unten beginnend) animiert nach oben zu scrollen. Sollte Javascript deaktiviert sein, wird das href-Attribut nicht entfernt und der Scroll Top Link funktioniert ebenfalls (ohne Animation) … sehr schön!

Anstatt das href-Attribut zu entfernen, kann man auch ein Klick-Ereignis anhängen.

Mit event.preventDefault() verhindert man die standardmäßige DOM-Ereignisaktion. Bei einem <a>-Tag mit href wäre das der normale Link Effekt, also das Weiterleiten zu einer anderen Seite.

/*<![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! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Sie sehen, in der Programmierung führen viele Wege nach Rom.

Übrigens, den Wert ’slow’ der animate-Funktion können Sie neben ‘middle’ oder ‘fast’ auch durch einen Zahlenwert ohne Hochkomma (Millisekunden, z.B. 5000) ersetzen und so die Scroll-Geschwindkeit Ihren Vorstellungen anpassen.

Diese Datei speichern Sie nun zum Beispiel als scrolltop.js ab und fügen diese ebenfalls in den Header Ihrer Seite unter der jquery.js ein (…).
Es besteht auch die Möglichkeit, den Quelltext direkt in den Head-Bereich einzufügen.

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery  -->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<!-- ScrollTop-Funktion -->
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
   $('a#top').click(function(){
        $(this).removeAttr('href');
        $('html, body'').animate({scrollTop:0},'slow')
   });
});
/*]]>*/
</script>
</head>
<body>
...

Das kann jedoch schnell unübersichtlich werden. Daher ist es anzuraten, alle Javascript-Dateien in einem eigenen Ordner unterzubringen.
Beachten Sie hierbei bitte, den Quellcode mit CDATA zu verpacken. Dem Validator wird dadurch mitgeteilt, dass es sich im CDATA-Tag um Text (Character Data) handelt, welcher nicht als XHTML anzusehen ist. Ältere Browser verstehen diesen Tag nicht, daher wird er einfach auskommentiert, was für den Validator wiederum keine Bedeutung hat.

Damit ist die erste Möglichkeit, einen animierten Scroll Top Link in die eigene Webseite einzufügen, abgeschlossen.
Noch mal die einzelnen Schritte:

  • Den Scroll Top Link wie in der Einleitung im Fußbereich oder unter dem Inhalt platzieren
  • Das jquery-Framework im Header der Webseite integrieren
  • Unter vorigem Framework die erstellte ScrollTop-Funktion einfügen

Zum Schluss fügen Sie in Ihre CSS-Datei noch folgende Formatierung für unseren Scroll Top Link ein:

#top {
  cursor:pointer;
  margin:0;
  padding:3px;
  position:absolute;
  bottom:0;
  left:310px;
        /*oder 'right' , je nachdem, was Sie bevorzugen*/
 }

Die Werte für left oder right können Sie Ihren Bedürfnissen anpassen. Probieren Sie einfach selber etwas herum.
An dieser Stelle möchte ich noch erwähnen, das die animate-Funktion sehr viel mächtiger ist und es ermöglich, mehrere Eigenschaften auf einmal zu ändern (Sichtbarkeit, Rahmen, Farbe …). Der Bereich für die Einstellungen oder der Video-Modus auf dieser Seite sind ein gutes Beispiel dafür (nur verfügbar im IE8, Firefox und Opera bei aktiviertem Javascript!).

(Bei mir funktioniert es nicht!)
Der Quellcode wurde natürlich getestet. Wenn es bei Ihnen nicht sofort klappen sollte (was bei mir, wie in der Programmierung üblich, ebenfalls oft der Fall ist), soll Ihnen diese Liste als Hilfe dienen:
  • Ist Javascript im Browser aktiviert? (z.B. im Firefox oben unter “Extras” -> “Einstellungen” -> “Javascript aktivieren”)
  • Ist das jquery-Framework ordnungsgemäß im Head-Bereich der Seite eingebunden? (Stimmt der Pfad, alle Hochkomma gesetzt, alle öffnenden und schließenden Tags vorhanden)
  • Wurde wie vorher jquery unsere scrollTop-Funktion ordnungsgemäß und unter jquery eingebunden? Gehen Sie noch mal den Quellcode durch, wurden alle Tags oder ID-Namen innerhalb der runden Klammern in Hochkomma gesetzt (abgesehen von ‘this’); sind alle schließenden Semikolon vorhanden etc.)
  • Stimmt die ID des Scroll Top Links mit der ID des Klick-Events in unserer Funktion überein?!
  • Verwenden Sie zusätzlich zu jquery noch ein weiteres Framework (z.B. Mootools)? Wenn ja, dann ersetzen Sie alle ‘$’-Zeichen durch ‘jQuery’ für den noConflict – Mode oder fügen Sie ‘jQuery.noConflict()’ direkt über ‘$(document).ready(function() …’ im Quellcode ein. Die verschiedenen Frameworks verwenden teilweise ebenfalls den ‘$’-Variablenname und behindern sich gegenseitig
  • Löschen Sie zwischendurch den Browser-Cache (z.B. im Firefox unter “Extras” -> “Private Daten löschen …” dort jedoch den Haken bei Chronik entfernen, sonst verlieren Sie die zuletzt besuchten Seiten)

Fast immer sind es Kleinigkeiten, wenn etwas nicht funktioniert: irgendwo fehlt ein Hochkomma oder Semikolon, eine falsche Klammer (z.B. rund anstatt geschweifte), kein öffnender oder schließender Tag, eine falsche ID …

Scroll Top Link (Teil 2)

1 Star2 Stars3 Stars4 Stars5 Stars (3 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