Mit jQuery nach oben scrollen

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"); ?>

1 Gedanke zu „Mit jQuery nach oben scrollen“

  1. 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 !!

Schreibe einen Kommentar