« 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-[tooltip tip=”ein kurzes Stück Quellcode”]Snippet[/tooltip]. Das Snippet und [tooltip tip=”Freie JavaScript-Bibliothek zur DOM-Navigation und -Manipulation.”]jQuery[/tooltip] 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 Antworten abbrechen