WordPress nach oben Button erstellen: 3 einfache Wege

Code hinzufügen: WordPress nach oben Button

Wenn dein WordPress Theme keine Option für den Scroll-to-Top Button bereithält und du kein Plugin verwenden möchtest, kannst du deine Website mit ein paar Zeilen Code ergänzen, um einen nach oben Button einzufügen. Dafür genügt heute modernes JavaScript (für die Funktionalität) in Kombination mit CSS (für die Optik). Eine jQuery-Bibliothek, wie sie früher oft eingebunden wurde, ist dafür nicht mehr nötig.

Der JavaScript Code kann folgendermaßen aussehen. Du fügst ihn am besten über ein Code-Snippet-Plugin (zum Beispiel WPCode) oder im Child-Theme vor dem schließenden body-Tag ein:

<script>
document.addEventListener("DOMContentLoaded", function () {

	// Der Button wird mit JavaScript erzeugt und am Ende des body eingebunden.
	var button = document.createElement("button");
	button.className = "scroll-to-top";
	button.setAttribute("aria-label", "Nach oben scrollen");
	button.textContent = "Nach oben";
	document.body.appendChild(button);

	// Der Button wird erst ab 160 Pixel Scrolltiefe eingeblendet.
	window.addEventListener("scroll", function () {
		button.classList.toggle("is-visible", window.scrollY > 160);
	});

	// Bei einem Klick auf den Button sanft nach oben scrollen.
	button.addEventListener("click", function () {
		window.scrollTo({ top: 0, behavior: "smooth" });
	});

});
</script>

Natürlich kannst du den Text „Nach oben“ auch durch ein Pfeil-Symbol oder eine Grafik ersetzen. Das aria-label sorgt dabei dafür, dass der Button auch für Screenreader verständlich bleibt.

Abschließend kannst du den Button noch mittels CSS anpassen. Das kann zum Beispiel so aussehen:

.scroll-to-top {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 20px;
 padding: 10px 14px;
 background: #333333;
 color: #ffffff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 z-index: 999;
}

.scroll-to-top.is-visible {
 display: block;
}