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.
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.pageYOffset > 300) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
});
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
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()undfadeOut()für ein sanftes Ein-/Ausblenden.