Sonntag, 27. Juli 2025
Ein Button am Seitenende, um mit einem Klick zum Seitenanfang zu scrollen
Ich habe mich daran gewöhnt und vermisse ihn, wenn eine Webseite „unten ohne” daherkommt: den Button am Seitenende, mit dem man bequem mit einem Klick zum Seitenanfang scrollen kann.
Meine Lösung – mit wenigen Zeilen JavaScript und CSS
Einfach die Code-Snippets in die Zwischenablage kopieren (Button), und mit strg + v in deine Webseiten einfügen. Fertig.
Das JavaScript
<script>
document.addEventListener("DOMContentLoaded", function () {
// Button erzeugen
const btn = document.createElement("button");
btn.id = "toTop";
btn.title = "Nach oben";
btn.textContent = "❯"; // oder ↑, ⇧, ⬆, was dir besser gefällt
// An Body anhängen
document.body.appendChild(btn);
// Scroll-Logik
window.addEventListener("scroll", function () {
if (window.scrollY > 300) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
});
// Klick-Verhalten
btn.addEventListener("click", function () {
window.scrollTo({ top: 0 });
});
});
</script>
Dieses JavaScript im <head>-Bereich oder besser ganz am Ende des HTML-Codes, unmittelbar vor den Tags </body> und </html> einfügen.
Das CSS
<style>
#toTop {
display: none;
position: fixed;
font-family:Arial;
color:#555 !important;
font-size:26px;
padding:0;
bottom:.7em;
left: calc(100% - 2.5em);
text-decoration:none;
outline:none;
opacity:.7;
border:1px solid;
border-radius:1em !important;
background:#fff;
width:40px;
height:40px;
line-height:1px; /*der Hack für Android zum Zentrieren*/
transform:rotate(-90deg);
text-align:center;
line-height:40px;
-webkit-tap-highlight-color: transparent; /*vermeidet das Flackern beim Drücken auf iOS*/
}
@media screen and (pointer: fine) {
#toTop:hover{
opacity:1;
transform:scale(1.2) rotate(-90deg);
}
}
</style>
Das CSS gehört, wie üblich, in den <head>-Bereich.
Das Ergebnis?
… sieht man hier auf dieser Seite. Unten rechts.➘
Copyright-Hinweis
Artikeltexte und Code-Snippets: Creative Commons
CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.