Tipps + Codeschnipsel für WordPress

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

Blog abonnieren

• Artikel via RSS Feed abonnieren
• Artikel via Twitter abonnieren
• Artikel via Facebook 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

• Petzi bei WordPress Linkmanager (Blogroll) wieder aktivieren
• Andre bei Kommentar-Feed deaktivieren
• Sven bei Ausgabe in Abhängigkeit von vorhandenem Inhalt des Posts
• Stefan bei Beiträge und Seiten duplizieren
• Stefan bei Größe von eingebetteten Medien anpassen

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)