Back To Top (an den Anfang) scrollen ohne Plugin

Auf vielen Websites findet man ein Icon, so dass man bei Klick auf das Icon an den Anfang der Seite oder des Beitrags (Back to Top) landet. Ich habe mir die Frage gestellt, ob diese Option nicht auch ohne Plugin realisierbar ist. Hier ist eine Lösung, die sogar barrierefrei ist. Es gibt aber einen kleinen Nachteil im Vergleich zu der Lösung mit einem Plugin, das ich auf dieser Seite verwende.

Zunächst: Diese Lösung funktioniert wunderbar bei Block Themes wie z. B. Twenty Twenty-Five.

Plugins wie das hier auf haurand.com verwendete Plugin „Smooth Back To Top Button“ findet man bei der Suche im WordPress Repository unter „Back to Top„. Dieses Plugin bietet den Vorteil, dass es zusätzlich auch optisch beim Icon eine Fortschrittsanzeige bietet. Das Plugin ist leichtgewichtig und bietet einige Einstellungsmöglichkeiten. Darüberhinaus funktioniert das Plugin auch bei klassischen Themes wie z. B. GeneratePress.

Back To Top bei Block Themes

Aber jetzt zurück zum Thema und der Implementierung von Back to top (Zurück an den Anfang) bei Block Themes ohne ein Plugin mit Bordmitteln:

Bei Block Themes kann man ohne Code z. B. den Footer oder Header anpassen. Dieser Beitrag soll auch deutlich machen, wie „einfach“ man solche Dinge bei Block Themes implementieren kann. In unserem Fall benötigen wir ein oder zwei Blöcke im Footer sowie ein paar einfache CSS-Regeln.

Unter Design > Editor > Vorlagen findet man den Footer. Bei dem verwendeten Block Theme (Circles WP) auf der Website (einer Präsentationsseite für das Theme), habe ich eine Spalte eingefügt. In dieser Spalte wird ein Bild und ein Absatz als Gruppe (Stapel) erstellt. Die Gruppe als Stapel ist notwendig, damit das Icon und der Text untereinander angezeigt werden. Der Absatz wird zusätzlich gruppiert, damit Innenabstände (padding) und Außenabstände (margin) eingestellt werden können. An sich könnte man auf die Gruppierung aber auch verzichten. Analog verfährt man bei anderen Block Themes wie z. B. dem Standard Theme Twenty Twenty-Five.

Im nachfolgenden Screenshot sieht man diese Blöcke. Wichtig dabei ist die Verlinkung auf den Anker #totop. Diesen Anker werden wir später im Bereich des Templates definieren.

Als Icon kann man eine entsprechende Grafik verwenden. In unserem Fall verwende ich eine SVG-Grafik (Download)

Info

SVG-Grafiken können aus Sicherheitsgründen nicht direkt in die Mediathek hochgeladen werden. SVG-Grafiken sind in WordPress für einfache, scharfe und skalierbare Grafiken sehr zu empfehlen, sollten aber wegen Sicherheitsrisiken nur gezielt und bereinigt eingesetzt werden. Allerdings kann man ein Plugin wie z. B. Easy SVG Support verwenden, das u. a. dafür sorgt, dass die SVG-Grafiken bereinigt werden. Mehr Infos zu SVG-Grafiken in WordPress.

Auch die Grafik wird im Stapel eingebunden. Die Verlinkung erfolgt ebenfalls auf den Anker #totop

Außerdem muss man bei der Grafik noch unter Erweitert bei „Zusätzliche CSS-Klasse(n)“ die CSS-Klasse to-top-fixiert angeben.

Achtung

Bei der Entwicklung dieser Lösung habe ich den Anker zunächst direkt im Header positioniert. Vorteil wäre natürlich gewesen, dass in dem Fall diese Lösung automatisch für alle Templates mit diesem Header funktioniert. Das hat aber leider nicht funktioniert. Einen Grund habe ich dafür nicht gefunden, aber freue mich über entsprechende Anmerkungen im Kommentar.

Update

29.11.2025: Über LinkedIn habe ich den folgenden sehr interessanten Hinweis von Hannes Leismann erhalten:
Man kann, aber muss nicht einmal einen Anker manuell setzen. „#top“ ist laut HTML Spezifikation für den Anfang der Seite reserviert 🙂
https://html.spec.whatwg.org/multipage/browsing-the-web.html#:~:text=for%20the%20string-,top,-%2C%20then%20return%20the
Das heißt, wenn ich auf die Grafik und ggf. den Text auf #top verlinke, dann klappt das automatisch mit allen Templates. Insofern solltet ihr bei Interesse diese Lösung verwenden.
Danke für den Hinweis 🙂

Update

1.12.2025: Über LinkedIn habe ich noch einen weiteren sehr interessanten Hinweis von Phillip Roth erhalten:
Für die Barrierefreiheit ist es gut, wenn nach dem Klick auch etwas fokussiert wird. Das ist bei „#top“ leider nicht der Fall. Ich habe deswegen nachgefragt, ob der „Skip-to-Content“-Button eine ID bekommen kann. So hat man jetzt mit „#wp-skip-link“ ein sinnvolles, fokussierbares Scrollziel nach ganz oben und kann direkt zum Content skippen, falls das denn gewünscht ist.
https://core.trac.wordpress.org/ticket/62311
Das wurde bei WordPress 6.8 realisiert. Danke für den Hinweis 🙂

Die folgende Lösung ist u. a. insofern interessant, wenn man – aus welchen Gründen auch immer – nicht bei jedem Template diese Option berücksichtigen möchte:
Wenn man den Anker im jeweiligen Template positioniert, dann funktioniert das einwandfrei. Dazu wähle ich unter Design > Editor > Templates ein Template, in dem ich die Lösung „back to top“ (zurück an den Anfang) verwenden möchte. Im folgenden Beispiel sieht man das Template für Seiten (Pages). Bei der übergeordneten Gruppe mit Beitragsbild und Inhalt (Content) wird der Anker totop unter Erweitert bei den Eigenschaften zur Gruppe festgelegt. Zusätzlich wird unter „Zusätzliche CSS-Klasse(n)“ die CSS-Klasse scroll-to-top angegeben:

Analog verfährt man mit allen Templates, wo dieses Feature verwendet werden soll.

Bezogen auf die drei genannten Lösungen ergeben sich aus meiner Sicht folgende Dinge, die man beachten sollte:

Bei Verwendung von #wp-skip-link wird der Fokus auf den Skip to Link „Zum Inhalt springen“ gesetzt. Das kann ggf. Inhalte wie z. B. das Logo bei einer Website überdecken.
Bei Verwendung von #top verbleibt der Fokus auf dem Icon bzw. Text „Zum Anfang“. Das kann zu Verwirrungen führen, wenn man die Navigation mit der Tastatur ausführt.
Bei Verwendung von #totop (dem manuell gesetzten Anker) wird der Fokus auf das letzte Element der Navigation gesetzt. Nachteil: Man muss – wie beschrieben – diese Änderung bei jedem Template durchführen.

Jetzt fehlen nur noch die CSS-Klassen:

/* möglichst an den Anfang scrollen */
.scroll-to-top {
scroll-margin-top: 80px; /* Höhe deines Sticky Headers */
}

/* verzögerte Darstellung und Pfeil dreht sich nach oben */
div.to-top-fixiert img:hover {
    transform: rotate(360deg);
    transition: transform 1.5s ease-in-out;  
}

div.to-top-fixiert {
   position:fixed;
   right:2em;
   bottom:2em;
   transition: all 10s;
   z-index:999;
}

Evtl. ist es notwendig, dass der Wert bei der Eigenschaft scroll-margin-top noch angepasst werden muss und/oder die o. g. Werte nach Belieben eingestellt werden müssen.

Diese CSS-Klassen kann man unter Design > Editor > Stile erfassen:

Eine weitere Methode wird nachfolgend beschrieben:

Zusätzliches CSS bei Block Themes eintragen

Dazu klickt man unter Design > Editor oben rechts auf „Stile“ (der Halbmond – 1), dann auf die drei senkrechten Punkte (2) und schließlich auf die Option „Zusätzliches CSS“.

Eine weitere und damit die sicher schnellste Option ist die Eingabe über die Tastatur (Befehlspalette) mit (Strg/Cmd+K) und Eingabe „CSS“. Anschließend wird sofort „Individuelles CSS öffnen“ angeboten.

Fazit

Auch wenn man wegen der vielleicht nicht ganz so schönen und eingeschränkten Optik diese Lösung nicht verwenden möchte, zeigt dieses Beispiel doch wieder einmal die Leistungsfähigkeit und Flexibilität von Block Themes. Die beschriebene Lösung ist übrigens barrierefrei, weil sie vom Screenreader erfasst wird und mit der Tabulator-Taste angesteuert werden kann. Im Grunde könnte man sogar auf den Absatz-Block „Zum Anfang“ verzichten.

Links, Quellen und aktuelle Infos

Easy SVG Support
https://de.wordpress.org/plugins/easy-svg/
Hier der Link zu dem Icon (mit rechter Maustaste und Klick auf „Link speichern unter“ wird das SVG gespeichert): https://haurand.com/wp-content/uploads/2025/11/arrow_up_round_1-1.svg
https://kinsta.com/de/blog/wordpress-svg/
https://de.wordpress.org/plugins/smooth-back-to-top-button/
https://wordpress.org/plugins/search/back+to+top/
https://html.spec.whatwg.org/multipage/browsing-the-web.html#:~:text=for%20the%20string-,top,-%2C%20then%20return%20the
Hier der Link zu dem Issue, den Phillip Roth gemeldet hat: https://core.trac.wordpress.org/ticket/62311

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden.

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.

Back To Top (an den Anfang) scrollen ohne Plugin