Mit jQuery nach oben scrollen

Am 14. Dezember 2009 von Tom unter "Templateprogrammierung" veröffentlicht.

Bei Webseiten mit langen Textpassagen kann es sinnvoll sein, im Fussbereich einen Button zum “Hochscrollen” anzubieten. Damit kann man schnell und ohne viel Gewese zum Anfang der Seite springen. Mit jQuery kann man diesen Sprung auch mit einem Scroll-Effekt versehen. Dafür wird via Input-Button ein entsprechender JavaScript-Befehl mit dem Ziel-Div (hier #header) abgesetzt. Der Input-Button kann bei Gestaltungsbedarf mit einer CSS-Klasse versehen werden (siehe 2. Beispiel).

<input type="button" onclick="if($.browser.opera){$('html').animate({scrollTop: $('#header').offset().top}, 1000);} else $('html,body').animate({scrollTop: $('#header').offset().top}, 1000);" value="Nach oben scrollen" />

<input type="button" class="scrolltop" onclick="if($.browser.opera){$('html').animate({scrollTop: $('#header').offset().top}, 1000);} else $('html,body').animate({scrollTop: $('#header').offset().top}, 1000);" value="Nach oben scrollen" />

Voraussetzung für das Funktionieren des Buttons ist die im Header geladene jQuery JavaScript Bibliothek, welche Bestandteil des WordPress-Pakets ist und mit einer einfachen Zeile Code im Head-Bereich (header.php) aktiviert werden kann.

<?php wp_enqueue_script("jquery"); ?>

Tags: Footer, JavaScript, jQuery

Mit jQuery nach oben scrollen

Dein Kommentar:

Suche

Blog abonnieren

Letzte Artikel

Kommentare

Kategorien

Alle ThemenThemen