Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!
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.
Einfach die Code-Snippets in die Zwischenablage kopieren (Button), und mit strg + v in deine Webseiten einfügen. Fertig.
<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.
<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.
… sieht man hier auf dieser Seite. Unten rechts.➘
Artikeltexte und Code-Snippets: Creative Commons
CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Ü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.