[JavaScript] Back to top Link "fade in" ✤✤

Okay, ich hab schon einmal erwähnt, dass ich momentan noch relativ wenig Ahnung von JavaScript habe, aber ich bin gewillt es zu lernen. Heute also ein relativ einfaches Script, das ich wiedermal 5202 zu verdanken habe, welches einen Backtotoplink in eure Seite einbaut, der nicht ständig da ist, sondern erst ab einem bestimmten Punkt eingeblendet wird.
Anschauen in Aktion könnt ihr euch das wenn ihr runtercrollt. ^^

Okay, damit das ganze mit dem hochscrollen auch schön ausschaut benutzen wir das JavaScript, dafür müsst ihr jquery in euren Blog einbauen.
Sucht dafür folgende Stelle im Code:

</head>

Direkt darüber fügt ihr folgendes ein:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'> </script> 

Jetzt könnt ihr Scripts verwenden =)
Also legen wir los.
Wir beginnen mit dem HTML des Codes:

<div id="back-top" style="display: block; ">   
<a href="#top">      <span></span>    </a> 
</div>

Das ist alles. Das Span-Element steht nachher für unser Bild, welches wir als Hintergrund dieses Elements definieren werden.

Okay, folgt nun die CSS
Zuerst richten wir den div-Container aus. Wir platzieren ihn fix unten in der rechten Ecke. Den z-Index geben wir an, damit der Pfeil über den anderen Elementen liegt und somit auf jeden Fall klickbar ist.

 #back-top { 
position: fixed; 
bottom: 60px; 
right:180px; 
z-index: 10 } 

Als nächstes definieren wir den Pfeil als Hintergrund des span-Elements. Den Pfeil könnt ihr relativ schnell gestalten. Einfach in Bild in der Grösse eurer Wahl (55x55 ist nicht schlecht, aber die Werte könnt ihr auch anpassen) öffnen und schnell ein Pfeilchen zeichnen. Ist nicht so schwer ^^ Dann Bild hochladen und den Link einfügen.

#back-top span { 
width: 55px; 
height: 55px; 
display: block; 
background: url('BILDLINK') no-repeat; } 

Und das ist die ganze CSS. Nicht anders als den BackToTop-Floatlink, den viele haben. Kommen wir nun zum Javascript, das aus mehreren Teilen besteht.

<script type='text/javascript'> //<![CDATA[  $(document).ready(function(){       // hide #back-top       $("#back-top").hide();

In diesem ersten Teil wird der Link ausgeblendet.

 // fade in #back-top      $(function () {           $(window).scroll(function () {              if ($(this).scrollTop() > 600) {                  $('#back-top').fadeIn();              } else {                  $('#back-top').fadeOut();              }          }); 

Hier haben wir eine Funktion, die ab einem Abstand von Oben von 6oopx, den Link wieder einblendet.

         // scroll body to 0px           $('#back-top a').click(function () {              $('body,html').animate({                  scrollTop: 0              }, 800);              return false;          });      });  }); //]]> </script>

Zum Schluss eine Definition, die wieder nach oben scrollt, sobald man auf den Link klickt. =)

Und das ist auch schon alles ^^
Ich hab den ganzen Code bei meinem Blog in ein HTML-Gadget eingebaut, so schaut dann dort der ganze Code aus:

<div id="back-top" style="display: block; ">   
<a href="#top">      <span></span>    </a> 
</div>  

<style> 
#back-top { 
position: fixed; 
bottom: 60px; 
right:80px; 
z-index: 10 
}  

#back-top span { 
width: 55px; 
height: 55px; 
display: block; 
background: url('BILDLINK') no-repeat; 
} 
</style>  

<script type='text/javascript'> //<![CDATA[  $(document).ready(function(){
        // hide #back-top
       $("#back-top").hide();
           // fade in #back-top
      $(function () {
           $(window).scroll(function () {
              if ($(this).scrollTop() > 600) {
                  $('#back-top').fadeIn();
              }
 else {
                  $('#back-top').fadeOut();
              }
          });
            // scroll body to 0px
           $('#back-top a').click(function () {
              $('body,html').animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
      });
  });
 //]]>
 </script>

Ihr könnt aber natürlich auch einfach nur das HTML ins Gadget einbauen, das Script unterhalb des Frameworks, das wir am Anfang eingebaut haben und das CSS beim Vorlagendesigner, aber ich hab gerne alles beeinander :)