Scroll-to-Top ist eine Schaltfläche, die nach längerem Scrollen an den Seitenanfang zurückführt. Sie taucht erst auf, wenn ein Stück gescrollt wurde, und sitzt meist unten rechts in der Ecke des Bildschirms.
- Scroll-to-Top
Schaltfläche, die nach längerem Scrollen an den Seitenanfang zurückführt.
Beispiel: „Die lange Glossarseite blendet ab der Hälfte unten rechts eine Scroll-to-Top-Schaltfläche ein.“Auch: Nach-oben-Button oder Back-to-Top.
Abgrenzung zur Sticky Navigation: Die mitlaufende Navigation führt an jede Stelle der Website, die Schaltfläche nur an den Anfang der aktuellen Seite.
Wann die Schaltfläche auftaucht
Ein verbreiteter Auslöser ist eine Bildschirmhöhe gescrollter Weg, oft mit einer kurzen Einblendung. Von Anfang an sichtbar verdeckt sie Inhalt, ohne gebraucht zu werden. Der Sprung selbst gehört sanft animiert, solange der Besucher keine reduzierte Bewegung eingestellt hat.
Umgesetzt wird sie als Schaltfläche, nicht als Link auf eine Raute. Ein Verweis auf #top hängt die Raute an die Adresse und legt einen Eintrag im Verlauf an, sodass der Zurück-Button anschließend wieder nach unten springt statt auf die vorige Seite.
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Wo sie sitzt und wie groß sie sein muss
Unten rechts, mit Abstand zum Rand, damit sie auf dem Smartphone nicht unter der Browserleiste verschwindet. Als Zielfläche sind mindestens 44 mal 44 Pixel angemessen, und sie braucht einen Namen für Vorlesewerkzeuge, weil ein Pfeil allein nichts sagt.
Auf dem Smartphone konkurriert sie mit allem anderen, was dort schwebt: Chat-Symbol, Cookie-Hinweis, Warenkorb. Mehr als ein schwebendes Element in derselben Ecke verdeckt zuverlässig den Inhalt darunter.
Wann sie überflüssig ist
Auf kurzen Seiten, die ohne Scrollen auskommen, und überall dort, wo eine mitlaufende Navigation den Weg nach oben schon anbietet. Auf dem Desktop erledigt die Pos1-Taste dasselbe, weshalb die Schaltfläche vor allem auf langen Seiten und auf dem Smartphone ihren Wert hat.
Bei Onepagern lohnt statt des reinen Sprungs nach oben eher eine Navigation, die zu den Abschnitten führt. Wer am Ende einer langen Seite steht, will meist zu einem bestimmten Abschnitt zurück und nicht an den Anfang.