« Scroll to top »
Weiches scrolling mit jQuery

Ein „Scroll to top“-Button oder „Scroll to top“-Link ist eine Bedienelement, das man immer häufiger auf modernen Websites findet.

Es vereinfacht die Navigation auf der besuchten Seite und löst ein scrollen zum Bildschirmanfang aus.

Dabei verbindet man einen Button oder einen Text mit einem jQuery-Snippet. Das Snippet und jQuery müssen daher schon in den Browser geladen sein.

Code-Beispiel:

<span id="totop">zum Seitenanfang</span>

Der Text „zum Seitenanfang“ wird dadurch mit der id „totop“ gekennzeichnet, und der durch $(„#totop“).click(function () verbundene jQuery-Code ausgelöst:

$(document).ready(function(){
 $("#totop").click(function () {
  $("html, body").animate({
   scrollTop: 0
   }, 600);
   return false;
 });
});

0 bedeutet Position 0, 600 bedeutet Scroll-Zeitspanne in ms.

Ein ähnliches Verhalten kann man auch durch einen HTML-Anker erreichen. Wie das funktioniert folgt an dieser Stelle.

Schreibe einen Kommentar