JQuery “scoll to top” Link

Wenn die Seite doch mal etwas länger wird, sollte man dem Besucher die Möglichkeit einräumen per Link wieder zum Seitenanfang zu gelangen.

Was geschieht in den nächsten Zeilen ?

Zuerst erstellen wir einen Anker (Link) im HTML Dokument mit der Aufschrift “nach oben” und vergeben eine Klasse damit wir das Element ansprechen können:

<a href="#" class="totop">nach oben</a>

Daraufhin erfolgt eine Positionierung des Ankers mittels CSS um den Link im Browserfenster rechts unten anzuzeigen:

a.totop { position:fixed; right:20px; bottom:20px; }

Nun kommt der spannende Teil. Das JQuery Script! Das Script blendet beim Laden der Seite den Anker aus. Wenn die Seite 200 Pixel nach unten gescrollt wird, wird der Link wieder eingeblendet. Sobald der Link angeklickt wurde gleitet die Seite sanft nach oben zum Seitenanfang.

$(document).ready(function() {
  $('a.totop').hide();
  $(window).scroll(function(){
    var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $('a.totop').fadeIn();
    } else {
      $('a.totop').fadeOut();
    }
  });
  $('a.totop').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 600);
    return false;
  });
});