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

Von Matu am 3. Juni, 2009 (21:56 Uhr) unter Kategorie: Javascript, WordPress

Im dritten Teil möchte ich Ihnen nun einen Scroll Top Link ohne Verwendung von jquery zeigen. Dies ist vor allem dann wichtig, wenn Sie sich mit der Programmierung beschäftigen und etwas hinter die Kulissen schauen wollen. Oder aber, Sie suchen lediglich eine „schlanke“ Möglichkeit für einen Scroll Top Link.

Natürlich kann ich hier nicht den Komfort bieten, wie dies ein ausgewachsenes Framework wie zum Beispiel jquery mit all seinen Funktionen ermöglicht. Aber das will ich auch gar nicht. Mein Anliegen beschränkt sich auf schlichten, funktionierenden und besonders schlanken Code, mit dem sich ein Scroll Top Link realisieren lässt (309 Byte).
Hierbei gehe ich wieder Schritt für Schritt vor, damit Sie mir auch folgen können, wenn Sie sich noch nicht so gut in der Programmierung auskennen.

1. Scroll Top Link modifizieren
Zunächst muss der Scroll Top Link in unserer Webseite modifiziert werden. Es reicht nun nicht mehr aus, diesem lediglich eine ID zuzuweisen und dann einfach über die click-Funktion von jquery zu „horchen“, ob dieser betätigt wurde. Wir erinnern uns …

...
$('a#top').click(function(){
...

Denn (richtig!), wir verwenden kein jquery mehr und müssen nun alles selber programmieren. Dazu benötigen wir zunächst einen so genannten event-Handler, mit dem auf ein Anwender-Ereignis, in unserem Fall der Klick auf den Scroll Top Link, eingegangen werden kann. Und dieser heißt, welch Zufall Icon Wink in Scroll Top Link (Teil 3) , onclick-Event-Handler.

(Anmerkung)
In der Programmierung dreht sich sehr viel um Ereignisse, auf die der Programmierer dann eingehen kann. Jedes Betriebssystem (Windows, Linux, MAC, …) und jede Software mit einer GUI (Graphical User Interface –> grafische Benutzeroberfläche) wartet im Grunde auf ein Ereignis des Benutzers, um anschließend etwas „zu machen“ bzw. auszuführen. Dazu benutzt der Programmierer die schon angesprochenen Event-Handler, die meines Wissens in jeder Programmiersprache vorhanden sind (zumindest in den mir bekannten). Oder aber sogenannte Listener, die auf eine Action warten und dann etwas ausführen (ein sehr gutes Beispiel wäre in diesem Fall Java oder C++ …). Für Javascript verweise ich Sie auf die Seite von Selfhtml.org. Dort können Sie alle verfügbaren Event-Handler dieser Programmiersprache nachlesen und kennen lernen, was ich Ihnen an dieser Stelle wärmstens empfehlen möchte. Natürlich nur, sofern Sie daran interessiert sind.

Dieses onclick-Ereigniss verbinden wir nun mit unserem Scroll Top Link:

 <a href='#' id='top' title='Nach oben' onclick='toTop()'> </a> 

Wenn nun der Benutzer auf dieses Element „klickt“, dann wird durch das onclick-Ereignis die Funktion toTop() angesprochen/ aufgerufen, die wir nun programmieren werden.

2. Scroll Top Funktion programmieren
In unserer Scroll Top Funktion müssen wir zunächst feststellen, ob sich unsere Webseite bereits am oberen Punkt oder aber weiter unten befindet. Um dies feststellen zu können, benutzen wir das pageYOffset-Objekt, welches die momentane vertikale Position unserer Seite beinhaltet. Wie immer kocht der Internet-Explorer der Redmonder sein eigenes Süppchen und dort lässt sich die vertikale Position mit document.body.scrollTop ermitteln.
Nachdem nun anhand der aktuellen Position festgestellt werden kann, ob gescrollt werden muss/ kann, kommt nun die Javascript-Funktion scrollBy() zum Einsatz.

/* Javascript-Funktion scrollBy() mit Parameter */ 
scrollBy(0, -20);

Dieser Funktion können Parameter übergeben werden, welche die Seite um eine angegebene Anzahl von Pixeln scrollen lässt. Dabei spricht der erste Parameter die x-Achse und der zweite Parameter die y-Achse unserer Webseite an.
Die x-Achse würde nun den Wert 0 erhalten, da wir ja nach oben scrollen wollen. Der y-Achse geben wir den Wert -20, so dass die Seite um 20 Pixel nach oben scrollt (sofern sie noch nicht oben angelangt ist).
Jetzt werden Sie sich eventuell fragen, warum nur 20 Pixel … ich möchte doch ganz nach oben. Das ist richtig, aber wir möchten einen Scroll-Effekt erzielen und nicht sofort oben ankommen. Dazu ist es nötig, immer wieder 20 Pixel nach oben zu scrollen, was letztendlich den Eindruck erzeugt, dass die Seite langsam nach oben gleitet. Dazu ist es wiederum nötig, dass sich die Funktion solange selber aufruft, bis das obere Ende unserer Webseite erreicht wurde. Betrachten wir dazu den nötigen Quellcode:

/*<![CDATA[*/
/* Unsere scrollTop-Funktion */
function toTop() {
/* Variable für die aktuelle Position deklarieren */
var seitenposition = 0;
/* Aktuelle Position ermitteln */
if (typeof window.pageYOffset != 'undefined') { /* Für normale Browser Icon Wink in Scroll Top Link (Teil 3)  ... */
   seitenposition = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined'
&& document.compatMode != 'BackCompat'){ /* ... und für den IE */
   seitenposition = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   seitenposition = document.body.scrollTop;
}

/* Wenn sich die Seite nicht oben befindet (Seitenposition größer 0) … */
if (seitenposition > 0) {
    scrollBy(0, -20); /* ... dann scrolle um 20 Pixel nach oben  … */
    setTimeout("toTop()", 5); /* ... ‘warte’ kurz und rufe die Funktion wieder auf ! */

 }
/*]]>*/

Achten Sie bitte da drauf, dass vor pageYOffset das oberste Objekt der Objektfamilie, “window”, mit aufgeführt wird. Selfhtml.org sagt hier zwar aus, dass dieses Objekt auch weg gelassen werden darf, …

window oder self können auch weggelassen werden.

… ich kann Ihnen aber versichern, dass dies zum Beispiel auf den IE7 nicht zutrifft (Fehler: ‘pageYOffset’ ist undefiniert).
Die einzelnen Werte für den Scroll-Schritt und die Wartezeit können Sie Ihren Vorstellungen anpassen.
Damit ist unsere selbstprogrammierte scrollTop-Funktion fertig und muss nur noch als Javascript-Datei in unsere Webseite integriert werden.


Wirklich fertig? Wenn Sie sich Teil 1 und Teil 2 durchgelesen haben, dann müsste Ihnen aufgefallen sein, dass ein wichtiger Schritt noch fehlt.
Genau! Um das „springen“ vor dem animierten „nach oben gleiten“ zu unterdrücken, müssen wir noch das href-Attribut unseres Scroll Top Links entfernen.
Hierfür bedarf es einer weiteren Funktion:

/*  Nodes/Attribute entfernen */
function removeAttribute() {
/* Wenn der ScrollTop Link vorhanden ist (HTML-Elementzugriff über id-Attribut) ... */
  if(document.getElementById('top')){
      /* ... dann speichere den Rückgabewert (Element-Objekt) in der Variablen d ... */
      var d = document.getElementById('top');
      /* ... schaue nach, ob das href-Attribute (bzw. das Attributknoten-Objekt) vorhanden ist ... */
      if(d.getAttributeNode('href')){
           /*  ... und wenn ja, speichere wiederum den Rückgabewert (des Attributknoten-Objekts) in der Variablen href … */
           var href = d.getAttributeNode('href');
           /* ... und entferne diesen Attributknoten von unserem Scroll Top Link (Element-Objekt) */
           d.removeAttributeNode(href);
      }
   }
}
/* Diese Funktion wird automatisch aufgerufen, sobald die gesamte Seite vollständig geladen wurde (window.onload)! */

window.onload=removeAttribute;

Durch diese Funktion wird über das DOM (Document Object Model) gezielt auf das href-Attribut unseres Scroll Top Links zugegriffen und dieses letztendlich entfernt ( … oder vielleicht besser gesagt, aus dem DOM-Baum ausgehängt. Denn im Quelltext ist es weiterhin vorhanden …).
Hier genauer auf das Document Object Model einzugehen, würde den Rahmen dieses Tutorials sprengen.

(Ich möchte sofort eine kurze und einfache Erklärung)
Dennoch möchte ich Ihnen eine kurze und einfache Erklärung liefern Icon Wink in Scroll Top Link (Teil 3) .
Betrachten Sie Ihre Webseite als einen Baum mit Stamm, den Ästen, den Blättern …!
Der Baum als Gesamtbild entspricht dabei dem obersten Objekt, dem window (das gesamte Browserfenster). Innerhalb unserer removeAttribut-Funktion könnte man das window-Objekt noch mit aufführen:

      var d = window.document.getElementById('scrolltop');

Dies ist aber an dieser Stelle nicht notwendig und kann weggelassen werden, da hier direkt das document-Objekt folgt. Dieses Ausgangsobjekt unseres Element-Baumes entspricht dem Stamm (Inhalt des Browserfensters), über den alle folgenden (HTML-) Elemente erreicht werden können.
Die einzelnen Elemente, Attribute und Eigenschaften einer Webseite können nun über entsprechende Funktionen (Methoden) angesprochen und verändert werden. Auf unser Baum-Beispiel bezogen würde das folgendermaßen aussehen:
Über unser Gesamtbild des Baumes (window) kann über den Stamm (document) und über die Äste (HTML-Elemente wie a, p, div, span, …) auf deren Blätter (href, title, alt, style, …) zugegriffen werden. Hierzu existieren verschieden Wege, um dies zu bewerkstelligen. Es kann über den Namen …

 ... name=’scrolltop’ ...
... document.getElementsByName(’scrolltop’)[0] ...

… die ID …

... id=’scrolltop’ ...
... document.getElementByID(’scrolltop’) ...

… oder eine Klasse …

... class=’scrolltop’ ...
... document.getElementsByClassName(’scrolltop’) ...

… in Verbindung mit dem so genannten Knotenpunkt …

... getAttributeNode('href') ...

… ein bestimmter Teil eines Elementes angesprochen werden.
Dazu „hangeln“ Sie sich praktisch von oben nach unten durch. Dafür ist es natürlich notwendig, die bereitstehenden Funktionen (Methoden) zu kennen. Sollte Ihr Interesse geweckt sein, dann finden Sie unter Javascript/DOM umfangreiche Informationen.

Aber anstatt das href-Attribut zu entfernen, gibt es noch eine einfachere Lösung. Und zwar indem wir unserem Scroll Top Link nach dem Aufruf der toTop-Funktion ein return false; anhängen.

 <a href='#' id='top' title='Nach oben' onclick='toTop(); return false';> </a> 

Dadurch wird das href-Attribut nicht mehr ausgeführt.
Es reicht also aus, unsere toTop-Funktion, wie schon in Scroll Top Link Teil1 beschrieben wurde, entweder direkt (CDATA nicht vergessen) oder als externe Javascript-Datei in den Header unserer Webseite einzufügen.
Nun haben sie drei Möglichkeiten, Ihre Webseite um einen Scroll Top Link zu erweitern.
Ich hoffe, dass Sie mir auf Grund der vielen Umwege nicht böse sind. Aber so erhalten Sie einen tieferen Einblick in das Thema.
Falls Ihnen die Tutorials Spaß bereitet haben und verständlich waren, würde ich mich über ein kurzes Feedback freuen.

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

3 Antworten zu “Scroll Top Link (Teil 3)”

  1. georg sagt:

    besten dank für deine informationen!hat mir sehr geholfen!!

  2. Matu sagt:

    Freut mich, dass ich Dir helfen konnte!

    Gruß Matu

  3. Matu sagt:

    Nachtrag:
    In der scrollTop()-Funktion bei ’scrollBy(0, -20);’ kann für den Step (-20) auch folgendes eingegeben werden:
    scrollBy(0, (Math.round(seitenposition/10+1)*-1));

    Das bewirkt, dass die Seite erst schnell nach oben scrollt und zum Ende hin langsamer ausläuft. Math.round rundet dabei den jeweiligen Wert der Seitenposition geteilt durch 10 auf eine ganze Zahl (Integer) auf oder ab (abhängig von der Nachkommastelle) und + 1 ist nötig, damit mindestens ein Wert von 1 erreicht wird. Das anschließende multiplizieren mit *-1 wandelt denn Wert in eine negative Zahl, den wir wollen ja nach oben scrollen.

    Gruß Matu

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