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"); ?>
Tags: Footer, JavaScript, jQuery
1 Kommentar zu
“Mit jQuery nach oben scrollen”
Dein Kommentar:
Suche
Blog abonnieren
Letzte Artikel
- Lösung, wenn WordPress im Wartungsmodus hängen bleibt
- Admin Bar im Front-End deaktivieren
- Ausgabe in Abhängigkeit von vorhandenem Inhalt des Posts
- Link-Tipp: WordPress und SSL
- Login-URL vereinfachen
- Größe von eingebetteten Medien anpassen
- WordPress Linkmanager (Blogroll) wieder aktivieren
- Login-Versuche mit „Limit Login Attempts“ begrenzen
- Beiträge und Seiten duplizieren
- Tumblr-Beiträge importieren
- Laden von NextGEN Gallery Javascripten deaktivieren
Kommentare
- WordPress Linkmanager (Blogroll) wieder aktivieren bei
- Kommentar-Feed deaktivieren bei
- Ausgabe in Abhängigkeit von vorhandenem Inhalt des Posts bei
- Beiträge und Seiten duplizieren bei
- Größe von eingebetteten Medien anpassen bei
Kategorien
- Allgemein (53)
- Browserspezifisches (4)
- BuddyPress (22)
- Konfiguration (25)
- Off-Topic (9)
- Performance-Optimierung (9)
- Plugins (42)
- Sicherheit (5)
- Software (1)
- Templateprogrammierung (38)
- Twitter (4)
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 !!