Ich persönlich finde es immer wieder sehr hilfreich einen Button angeboten zu bekommen mit dem ich direkt nach oben zur Seite springen kann. Im Laufe der letzten Jahre in der Webentwicklung verliert dieses Feature jedoch leider zunehmend an Bedeutung, da ja die Navigationen als fixe Header permanent eingeblendet werden und es dadurch schon möglich direkt weiter zu navigieren und man gar nicht erst hochscrollen muß, um wieder die Navigation zu erhalten. Einen sehr schonen Effekt nutzt hier die Seite des T3N Magazins, die einem beim scrollen nach oben dann einen zusätzlichen Header mit weiterführenden Links anbieten.
jQuery Scroll to the top
In diesem Artikel geht es jetzt aber um „jQuery Scroll to the top“ und die Funktionen, die für einen Button damit verbunden sind. Das Ganze kann natürlich auch mit reinem HTML in Form von Anker-Links realisiert werden, allerdings hat man dann nicht den schönen Scroll-Effekt sondern eine echte Sprungmarke. Die jQuery animate Methode kann nicht nur für Scroll-Effekte genutzt werden und bietet dadurch viele Möglichkeiten anspruchsvolle Features zu realisieren.
jQuery Scroll to the top
Man nutzt hier die animate jQuery Methode mit den scrollTop Attribute.
|
1 2 3 4 5 6 |
$(document).ready(function() { $('a[href=#top]').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); return false; }); }); |
Das oben abgebildete jQuery-Snippet bindet die Scroll Funktion an einen Link mit dem href #top. Den muß man dann natürlich im HTML auch anlegen.
jQuery Scroll to the bottom
Das ganze kann man natürlich auch für den gegenteiligen Effekt nutzen. Also mit jQuery nach unten an das Ende der Seite scrollen.
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#BottomScroller').click(function(){ $('html, body').animate({scrollTop:$(document).height()}, 'slow'); return false; }); }); |
Hier habe ich das ganze jetzt mal an eine ID gebunden. #BottomScroller auch hier ist es natürlich möglich ein href Sprungmarke #bottom zu referenzieren.
