Back to Top Button erstellen.

Dieses Tutorial zeigt dir, wie du einen „Back to Top“ Button erstellst, der beim Scrollen erscheint und dich mit einem Klick sanft zum Seitenanfang bringt. Du erhältst Varianten mit reinem JavaScript und mit jQuery, inkl. HTML und CSS. Scroll mal ein Stück nach unten – links unten erscheint der Demo-Button.

HTML: Der Button

Füge diesen Button an einem geeigneten Ort in dein HTML ein (z.B. ganz unten vor dem </body>-Tag):

<a href="#" id="back-to-top" aria-label="Nach oben">↑ Nach oben</a>

Variante 1: Reines JavaScript (Vanilla JS)

Hier ein einfaches Skript, das den Button ab 300px Scrollhöhe einblendet und beim Klicken zurück nach oben scrollt.

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            btn.style.display = 'block';
        } else {
            btn.style.display = 'none';
        }
    }, { passive: true });
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
});
</script>

Variante 2: jQuery

Falls du jQuery verwendest, kannst du diesen Code einsetzen, der denselben Effekt erzielt:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    var btn = $('#back-to-top');
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            btn.fadeIn();
        } else {
            btn.fadeOut();
        }
    });
    btn.click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 'slow');
    });
});
</script>

CSS für den Back to Top Button

Du kannst das Styling des Buttons frei anpassen. Hier ein Beispiel mit schwarzem Hintergrund, weißen Texten und abgerundeten Ecken:

#back-to-top {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 18px;
  background-color: #000;
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999;
  transition: opacity 0.3s ease;
}
#back-to-top:hover {
  background-color: #444;
}

Schritt-für-Schritt Erklärung

• Der Button ist standardmäßig ausgeblendet (CSS display: none).
• Beim Scrollen prüft das Script, ob mehr als 300 Pixel heruntergescrollt wurde.
• Ist das der Fall, wird der Button eingeblendet, sonst ausgeblendet.
• Ein Klick auf den Button sorgt für sanftes Scrollen zurück zum Seitenanfang.
• Die jQuery-Variante nutzt fadeIn() und fadeOut() für ein sanftes Ein-/Ausblenden.

Fazit

Ein „Back to Top“ Button ist eine kleine, aber sehr nützliche Funktion für längere Seiten und verbessert die Navigation deutlich. Wenn du den Button lieber direkt erstellen möchtest, findest du im Back to Top Button Generator eine fertige Lösung als WordPress-Plugin. Außerdem passen auch mein Sticky Header Tutorial und das Tutorial Theme umschalten thematisch gut dazu.