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!

webdesign weisshart Startseite

zurück zum Standard-Style

Ein Button am Seitenende, um mit einem Klick zum Seitenanfang zu scrollen

Symbolbild

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.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat