Top-Link: Teil2 - jQuery - Scrolling

Erstellt von Johannes Teitge in To-Top Link am 04 29th, 2009 | 2 Kommentare


Nachdem wir alle grafischen Elemente fertiggestellt haben, beschäftigen wir uns mit der Umsetzung der Interaktionen. Obwohl Magento jQuery nicht benutzt, habe ich mich dafür entschieden. Der Grund ist die einfache Handhabung, und vor allem weil jQuery mit Abstand alle anderen Ajax-Frameworks in fast allen Punkten schlägt.

Eine Vergleichsmatrix finden Sie hier: http://mootools.net/slickspeed/

Wir erstellen nun eine kleine HTML-Anwendung die uns als Testumgebung dienen soll. Wir werden dann diese Anwendung Step by Step erweitern.

Umsetzung: 

1. Erstellen Sie ein Verzeichnis mit den Unterverzechnissen html,images,ja und css
to-top-t2_01

2. Erstellen Sie im Verzeichnis html die Datei scroll_to_top_step1.html mit folgendem Inhalt:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="../js/scroll_to_top_step1.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>

<div class="block"><strong>To-Top Link Step 1</strong></div>

<a href="#" id="toTop">Scrollen nach Oben</a>

</body>
</html>

Im Head-Bereich binden wir jquery direkt von der Hersteller-Website ein. Sie können jQuery auf www.jquery.com auch downloaden und lokal von Ihrem Rechner aus enbinden. Zusätzlich binden wir unsere eigene Javascript- und CSS-Dateien ein, die wir nun erstellen werden.

3. Erstellen Sie die Datei js/scroll_to_top_step1.js mit folgendem Inhalt

    jQuery(function(){
      // Scroll to Top
      jQuery.fn.scrollToTop=function(){
        jQuery(this).click(function(){ // Klick des ToTop-Links
          jQuery("html, body").animate({scrollTop:0},"slow")
        })
      }

      jQuery(document).ready(function(){
        jQuery(function() {
          jQuery("#toTop").scrollToTop(); // Zuweisen von scrollToTop
        });
      });

    });

In Zeile 3 definieren wir die Funktion scrollToTop. Dies ist auch für das Scrollen nach Oben zuständig. In Zeile 11 sehen Sie wie wir unser A-Tag mit der id toTop, aus unserem HTML-Dokument, die Funktion scrollToTop zuweisen. Diese reagiert auf ein Klick-Event (jQuery(this).click(function()) und führt die Animation aus.

4. Erstellen Sie die Datei css/main.css mit folgendem Inhalt

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.block {
  height:2000px;
  background: url(../images/bg.gif);
  color: #8B0000;
  padding: 10px;
}

Das Ergebnis sehen Sie hier: scroll_to_top_step1.html

Wir machen nun weiter mit der Formatierung unseres To-Top Links. Durch das Zuweisen der jQuery-Funktion scrollToTop benötigen wir das Attribut href nicht mehr, da die click Funktion alle Aktionen ausführt. Dafür gibt es in jQuery die Funktion removeAttr. Wir ergänzen unser Javascript mit der Zeile jQuery(this).removeAttr(”href”);.

...
      jQuery.fn.scrollToTop=function(){
        jQuery(this).removeAttr("href");
        jQuery(this).click(function(){ // Klick des ToTop-Links
...

Zusätzlich formatieren wir unseren Link mittels CSS.

    #toTop {
      cursor: pointer;
      color:#990000;
    }

Das Ergebnis sehen Sie hier: scroll_to_top_step2.html

Eine unsere Anforderungen ist es, dass der Link nur dann erscheint wenn die Scrollbar nach unten bewegt wurde. Its man an der Top-Position angelangt, wird der Link wieder ausgeblendet. Um dies realisieren zu können, müssen wir ein Scroll-Event integrieren, damit wir auf das Fenter-Scrolling reagieren können. Für das Ein- und Ausblenden gibt es in jQuery die Funktionen fadeIn und fadeOut. Um innerhalb des Events auf den Link referenzieren zu können, müssen wir bei der Initialisierung eine Globle Variable erzeugen. Im Code sieht das dann wie folgt aus:

...
      jQuery.fn.scrollToTop=function(){
        var ToTop=jQuery(this); // Variable initialisieren
        jQuery(this).removeAttr("href");

        jQuery(window).scroll(function(){ // Windows Scroll-Event
          if(jQuery(window).scrollTop()=="0"){
            jQuery(ToTop).fadeOut("slow") // ToTop-Link ausblenden wenn die Scroll-Position 0 ist
          } else{
            jQuery(ToTop).fadeIn("slow") // ToTop-Link einblenden wenn die Scroll-Position nicht 0 ist
          }
        });
...

Das Ergebnis sehen Sie hier: scroll_to_top_step3.html

Im nächsten Step wollen wir unseren Link weiter formatieren und den Bounce-Effekt integrieren. Für den Bounce-Effekt verwenden wir das jQuery Easing Plugin. Schauen Sie sich das Demo auf der Herstellerseiter mal etwas nächer an. Das schöne daran ist, dass man die animate Funktion von jQuery erweiteret wird. Wir müssen nur das Plugin einbinden und den Aufruf von .animate anpassen. Das Javascript sieht nach unsere Anpassung wie folgt aus:


...
        jQuery(this).click(function(){ // Klick des ToTop-Links
          jQuery("html, body").animate({scrollTop:0}, {duration:'slow', easing: 'bounceout'});
        })
...

zusätzlich werden zwei Javascript Dateien des jQuery-Plugins eingebunden.

...
  <script src="../js/jquery.easing.1.3.js"></script>
  <script src="../js/jquery.easing.compatibility.js"></script>
...

Nur noch unseren To-Top Link mit etwas CSS formatieren und wir haben bereits ein beachtliches Ergebnis.

    #toTop {
      display:none;
      width: 100px;
      border: 1px solid #990000;
      text-align: center;
      padding: 2px 2px 2px 12px;
      position: fixed;
      bottom: 10px;
      right: 10px;
      cursor: pointer;
      color:#990000;
      text-decoration:none;

      background: #f1f1f1 repeat-x url(../images/to-top-bg.png);
    }

Das Ergebnis sehen Sie hier: scroll_to_top_step4.html

Damit sind wir am Ende von Teil2 angelangt und ich hoffe Sie haben einiges dazu gelernt. Ich hoffe wir sehen uns in Teil3 wieder.

  • Twitter
  • Webnews
  • Mister-Wong
  • Facebook
  • Digg
  • BlogMarks
  • Share/Save/Bookmark

2 Kommentare to “Top-Link: Teil2 - jQuery - Scrolling”

  1. To-Top Link: Einführung | Magento Experts To-Top Link: Einführung | Magento Experts sagt:
    3. Mai 2009 um 11:23

    [...] Der Link soll nur sichtbar sein, wenn gescrollt wird [...]

    Zum Antworten anmelden
  2. ds_1984 sagt:
    1. Juni 2009 um 18:01

    Schön das man so an Magento herumdoktern kann!

    Habe fast die Übersicht verloren aber ich habe es am Ende hinbekommen (step1.html, step2.js usw.) :-)

    Liebe Grüße - Daniel

    Zum Antworten anmelden

Kommentar erstellen

You must be logged in to post a comment.

Bitte beachten: Mxperts.de ist kein Supportforum sondern eine Informationsplattform, deshalb benutzt für Diskussionen das deutsche Forum von Magento. (Fragen/Kommentare zu den Tutorials ausgeschlossen). Außerdem gebe ich keinen kostenlosen Support zu Magento. Leider haben das einige Leser in letzter Zeit falsch Verstanden und ich bitte um Euer Verständnis. Ich denke diese Plattform ist von unserer Seite aus schon genügend Gratis-Leistung.

Kategorien

Letzte Artikel

Letzte Kommentare

 

September 2010
M D M D F S S
« Jul    
 12345
6789101112
13141516171819
20212223242526
27282930  

Links

Archiv

| Registrieren | Copyrights 2009 by TMEDIA cross communications | RSS |Powered by Wordpress