Publii - Back to Top

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.

<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>

<style>
  #scrollTopBtn {
    /* Positionierung unten rechts */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99; /* Sorgt dafür, dass der Button über anderen Elementen liegt */
    
    /* Styling für den Button (Standardmäßig ausgeblendet) */
    display: none; 
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* Visuelles Feinschliff (kannst du nach Belieben anpassen) */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 10px;
  }

  /* Wird vom JavaScript aktiviert, wenn gescrollt wird */
  #scrollTopBtn.show {
    display: block;
    opacity: 1;
  }

  #scrollTopBtn:hover {
    transform: translateY(-3px); /* Kleiner Hover-Effekt */
  }
</style>

<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>

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.