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

1 Kommentar zu
“Mit jQuery nach oben scrollen”

Karlchen sagt:

4. Januar 2011 um 19:50

Hey das ist cool. An sowas mit dem Hochscrollen hatte ich noch nie gedacht. Ist aber ein super Service für meine Besucher. Ich habe einen Blog mit teilweise sehr langen Seiten. Ist dafür also sehr nützlich. Habs eingebaut und funzt 1A. Thanks !!

Dein Kommentar:

Suche

Blog abonnieren

Letzte Artikel

Kommentare

Alle ThemenThemen

.htaccess 2.8 2.9 3.0 BuddyPress CSS functions.php Galerie JavaScript Linklisten NextGEN Gallery Performance Plugins RSS Sicherheit Sidebar Template Tags Twitter wp-config.php