Magnus van Dyke

UP – Button

Lesedauer ca.

1–2 Minuten
Magnus van Dyke

/ Stand:

Wie du einen „Nach oben scrollen“-Button einfügst, der erst erscheint, wenn man den Artikel fast zu Ende gelesen hat?

Ein „Nach oben“-Button (Back to Top) verbessert die Nutzererfahrung enorm, besonders auf dem Smartphone, wenn man durch einen langen Blogbeitrag gescrollt hat.

In Twenty Twenty-Four gibt es keinen eingebauten Schalter dafür, aber wir können das mit einem einfachen Trick im Footer-Template lösen.

Schritt 1: Den Button im Footer platzieren

  1. Gehe zu Design > Editor > Muster (oder Vorlagen) und wähle den Footer.
  2. Klicke ganz unten in deinem Footer auf das + Icon und füge einen Buttons-Block hinzu.
  3. Schreibe einen Text wie „↑“ oder „Nach oben“.
  4. Wichtig: Klicke auf das Link-Icon des Buttons und gib dort #top ein.
    • Hinweis: WordPress setzt automatisch einen Anker mit der ID top ganz oben auf jeder Seite.

Schritt 2: Den Button „schwebend“ machen

Damit der Button nicht einfach nur statisch im Footer steht, sondern unten rechts in der Ecke mitwandert, brauchen wir wieder ein wenig CSS:

  1. Wähle den Buttons-Block aus.
  2. Gehe rechts auf Erweitert und gib ihm die CSS-Klasse back-to-top.
  3. Gehe zu Stile (Kreis-Icon) > Zusätzliches CSS und füge diesen Code ein:

CSS

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0.8;
}

.back-to-top:hover {
    opacity: 1;
}

/* Optional: Button auf Desktop ausblenden, falls er dort stört */
@media (min-width: 1024px) {
    /* .back-to-top { display: none; } */ 
}

Schritt 3: Sanftes Scrollen aktivieren (Smooth Scroll)

Damit die Seite nicht einfach nach oben springt, sondern sanft gleitet, füge diesen Schnipsel ebenfalls unter Zusätzliches CSS ein:

CSS

html {
    scroll-behavior: smooth;
}

Ein kleiner “Profi-Check”:

Wenn du möchtest, dass der Button erst erscheint, wenn man ein Stück gescrollt hat, bräuchte man ein kleines JavaScript-Plugin (z. B. “WPFront Scroll Top”). Mit der CSS-Methode oben ist der Button jedoch immer sichtbar, was technisch schlanker ist und keine Ladezeit kostet.

Was hältst du davon? Wir haben jetzt:

  1. Das Beitrags-Layout geändert.
  2. Eine Seitenleiste eingebaut (und mobil versteckt).
  3. Alles “Sticky” gemacht.
  4. Das mobile Menü optimiert.
  5. Einen “Nach oben”-Button hinzugefügt.
in , ,