WordPress Scroll to Top Button mit jQuery realisieren

Veröffentlicht am von / Lesezeit: 3 Minuten

In diesem Tutorial zeige ich, wie du in deinem Theme einen WordPress Scroll to Top Button mit etwas JavaScript und jQuery realisieren kannst. Ein Scroll to Top Link führt Besucher schnell zurück zum oberen Rand und verbessert so die Bedienung der Website.

Für die folgenden Code Beispiele habe ich ein Child Theme für TwentySixteen verwendet.

Scroll to Top JavaScript im WordPress Theme laden

Die komplette Funktionalität des Scroll Back to Top Features kann mit jQuery umgesetzt werden. Wir benötigen daher nur eine kleine PHP Funktion, um die JavaScript Datei für unseren Scroll Button im Footer des Themes zu laden.

Die folgende Funktion kann in die functions.php des Child Themes kopiert werden.

function theme_slug_scroll_to_top_js() {
	wp_enqueue_script( 'theme-slug-scroll-to-top', get_stylesheet_directory_uri() . '/assets/js/scroll-to-top.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_slug_scroll_to_top_js' );

Mit get_stylesheet_directory_uri() wird die Datei dabei vom Child Theme geladen.

Nach oben Scrollen mit jQuery realisieren

Als Nächstes legen wir die Datei scroll-to-top.js im Unterordner /assets/js im Child Theme an.

Dort kannst du nun folgenden JavaScript Code für die grundlegende Funktionalität einfügen:

/**
 * Scroll to Top JS
 */
( function( $ ) {

	$.fn.scrollToTop = function() {

		/* Scroll back to top when element is clicked */
		$( this ).click( function () {
			$( 'html, body' ).animate( { scrollTop: 0 }, 300 );
			return false;
		} );

	};

} )( jQuery );

Die Funktion sorgt mithilfe der animate() Methode von jQuery zu einem Smooth Scrolling Effekt zum oberen Bildschirmrand, nachdem das übergebene Element angeklickt wurde.

Mit $.fn.scrollToTop = function() erstellen wir die Scroll-Funktion als jQuery Plugin, wodurch die Methode später auf beliebige jQuery DOM Objekte angewandt werden kann.

Ein Link im Footer kann so mit einem einfachen Aufruf der Funktion als Scroll Back to Top Link umfunktioniert werden:

$( 'a.scroll-up' ).scrollToTop();

Scroll to Top Button hinzufügen

Grundsätzlich kann jeder Link im Footer des Themes als Scroll to Top Link verwendet werden. Wir wollen aber einen Scroll Button einfügen, der automatisch im rechten unteren Eck eingeblendet wird.

Die Anzeige des Buttons realisieren wir deshalb ebenfalls in JavaScript.

$( document ).ready( function() {

	/* Add Button to HTML DOM */
	$( 'body' ).append( '<button id=\"scroll-to-top\" class=\"scroll-to-top-button\"></button>' );

	/* Add Scroll To Top Functionality */
	$( '#scroll-to-top' ).scrollToTop();

} );

Zuerst fügen wir den Button im WordPress Theme vor dem abschließenden </body> Tag hinzu. Danach wenden wir unseren zuvor erstellten Scroll-Effekt auf den Button an.

Mit $( document ).ready() wird sichergestellt, dass das HTML DOM vollständig geladen ist.

Styling für WordPress Scroll to Top Button

Nachdem der Button im Frontend angezeigt wird, kannst du in der style.css des Child Themes das Styling des Buttons vornehmen.

Mit etwas CSS Code sorgen wir für eine Ausrichtung des Buttons an der gewünschten Stelle.

.scroll-to-top-button {
	position: fixed;
	right: 40px;
	bottom: 40px;
	margin: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	z-index: 9999;
}

.scroll-to-top-button:after {
	display: inline-block;
	margin-left: 2px;
	content: '\f432';
	vertical-align: top;
	font-size: 32px;
	font-family: 'Genericons';
	line-height: 1;
}

TwentySixteen nutzt von Haus aus den Genericons Icon Font, welchen wir nutzen können, um einen Pfeil als Button Inhalt darzustellen.

Scroll to Top Button ausblenden und automatisch anzeigen

Bis jetzt wird unser Button praktisch immer angezeigt.

Das ergibt aber wenig Sinn. Falls sich Besucher am Anfang der Website befinden, erfüllt der Button keinerlei Zweck, weil nicht weiter nach oben gescrollt werden kann.

Deshalb ist es sinnvoll, den Button nur anzuzeigen, wenn mittels Scrollen die unteren Bereiche der Website erreicht werden.

Das gewünschte Verhalten erreichen wir mit der Erweiterung unserer Funktion scrollToTop(). Folgender JavaScript Code kann am Anfang der Funktion eingefügt werden:

var scrollButton = $( this );

/* Hide Button by default */
scrollButton.hide();

/* Show Button on scroll down */
var showButton = function() {

	var window_top = $( window ).scrollTop();

	if ( window_top > 150 ) {
		scrollButton.fadeIn( 200 );
	} else {
		scrollButton.fadeOut( 200 );
	}
}

showButton();
$( window ).scroll( showButton );

Als Erstes blenden wir mit hide() den Button erst einmal aus.

Die nachfolgende Funktion showButton() sorgt dafür, dass der Button wieder angezeigt wird, wenn das sichtbare Browserfenster einen Mindestabstand von 150 Pixel zum oberen Rand aufweist. Bei einem geringeren Abstand wird der Button wieder ausgeblendet.

Mit der Anwendung des scroll() Events auf das window Objekt wird permanent überwacht, ob der Button angezeigt werden soll oder nicht.

Als Ergebnis erhalten wir nun einen Scroll to Top Button, der automatisch erscheint, wenn die Seite nach unten gescrollt wird.

Komplette JavaScript Datei

Die ganze JavaScript Datei habe ich als Github Gist bereitgestellt:

Bei Fragen oder Feedback zu dem Tutorial freue ich mich wie immer über Eure Kommentare.