Back-to-Top-Button in Publii per Custom Code – ganz ohne Theme-Anpassung

Füge einen „Zurück nach oben“-Button in Publii ein – ganz ohne Theme-Hacking, nur mit Custom Code!

Mit ein paar Zeilen HTML, CSS und JavaScript lässt sich in Publii ein praktischer „Back to Top“-Button einbauen – ganz ohne Änderungen am Theme. Ideal für alle, die ihre Seite benutzerfreundlicher gestalten wollen, ohne sich tief in den Code einzuarbeiten. Update-sicher, schnell umgesetzt und voll anpassbar!

Vorteile dieser Methode

• Kein Eingriff in Theme-Dateien notwendig
• Rücksetzbar und update-sicher
• Funktioniert auf allen Themes

Schritt-für-Schritt-Anleitung

1. Publii öffnen und Website auswählen

Starte Publii und wähle deine Website aus dem Dashboard.

2. Custom Code aktivieren

Klicke links auf: Tools & Plugins. Hier kannst du nun eigenen HTML-, CSS- und JavaScript-Code hinzufügen.

3. HTML für den Button einfügen

Klicke auf den Eintrag Custom HTML und anschließend auf den Eintrag Footer.

Im Bereich für den HTML-Code trägst du den Button-Code ein und speicherst die Anpassung anschließend mit einem Klick auf Save Changes.

<!-- Scroll to Top Button -->
<button onclick="scrollToTop()" id="scrollTopBtn" title="Back to top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <polyline points="18 15 12 9 6 15" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</button>

4. JavaScript für Sichtbarkeit & Scroll-Verhalten

Füge direkt unter dem eingefügten Button-Code den folgenden JavaScript-Code ein und speichere die Änderungen anschließend mit einem Klick auf Save Changes.

<script>
    // Show button when scrolling down
  const scrollTopBtn = document.getElementById("scrollTopBtn");

  window.onscroll = function () {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      scrollTopBtn.classList.add("show");
    } else {
      scrollTopBtn.classList.remove("show");
    }
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
</script>

5. CSS für Design & Position

Wechsle jetzt zu Custom CSS, ebenfalls unter Tools & Plugins zu finden.

Füge dort folgenden CSS-Code ein und übernimm die Anpassungen durch Klicken auf Save Changes.

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;        /* Weißer Hintergrund */
    border: 2px solid gray;         /* Grauer Rand */
    border-radius: 50%;             /* Rund */
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.3s;
  }

  #scrollTopBtn:hover {
    background-color: #f0f0f2;      /* Blau bei Hover */
  }

  #scrollTopBtn.show {
    display: flex;                  /* Sichtbar machen */
  }

  #scrollTopBtn svg {
    width: 24px;
    height: 24px;
    display: block;
  }

6. Änderungen speichern und veröffentlichen

1. Speichere alle Änderungen.
2. Klicke unten links auf “Sync your website”, um den Button live zu schalten.

Ergebnis testen

Rufe deine Website auf und scrolle nach unten – nach ca. 300 px erscheint der Button. Mit einem Klick darauf wirst du sanft nach oben gescrollt.

Abschluss

Das Tutorial zum “Back-to-Top-Button in Publii per Custom Code – ganz ohne Theme-Anpassung” ist hiermit beendet. Bei Fragen kannst du gerne eine E-Mail an ralf.kirchner@ksite.de senden.