jQuery Scroll to the top

0
Blog is deprecated - Neu blog.nevercodealone.de

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

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.

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.

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.

Online Demo jQuery Scroll to the top

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.