Ich bin ein großer Fan von schlichtem Design. Damit das nicht langweilig wird, bietet es sich an, kleine Spielereien oder Animationen auf einer Website zu integrieren (apropos, wer hat schon das Easter Egg gefunden? Wer einen Tipp möchte, schickt mir ne Nachricht auf Twitter 🐦).
Heute zeige ich euch, wie ihr einen Back-to-Top-Button integrieren könnt, der wie ein Aufzug aussieht. In Teil 1 erstellen wir den Aufzug. Im zweiten Teil werden wir ihn animieren.
Das brauchen wir:
- einen Back-to-Top-Button, der wie ein Aufzug aussieht
- der Aufzug soll an einem Seil hängen, das aussieht, als sei es oben am Browser befestigt
- der Aufzug und das Seil sollen erst erscheinen, wenn wir etwas runtergescrollt haben
- der Button soll barrierefrei sei
- und wir wollen natürlich auf gute UX achten
Den Aufzug als SVG-Grafik einbinden
Zunächst brauchen wir einen Aufzug. Das kann irgendeine Grafik sein, ich persönlich binde aber gerne SVG-Grafiken ein, weil mir das einige Möglichkeiten für das Stylen in CSS gibt. Zudem haben wir später beim Animieren mehr Möglichkeiten, die Grafik zu manipulieren.
Auf die Schnelle habe ich kein Icon gefunden, das meinen Vorstellungen entsprach, also habe ich in Affinity Designer selbst eine Grafik erstellt und als SVG-Datei exportiert. Wenn ich die Datei nun im Code Editor öffne, bekomme ich einen Code, den ich im Folgenden in mein HTML-Dokument einfügen kann. Ich empfehle, die Grafik vorher zu optimieren, zum Beispiel mit SVGOMG .
Die HTML-Struktur erstellen
Als nächstes betten wir unser Icon auf einer Website ein.
Zuerst brauchen wir eine Box, in die wir alle Bestandteile unseres Aufzugs setzen. Diese Box bekommt die ID elevatorContainer, und wir platzieren sie am Ende der Seite, aber noch im Main-Tag. Dann soll unser Aufzug an einem Seil hängen. Wir fügen also <div class="elevator_rope"></div> über dem Aufzug ein. Der Button ist eigentlich ein Link, dem wir aber role="button" geben und der auf id="top" im Header verweist.
Das Ganze sieht dann so aus:
<main>
<header id="top"><h1>Always wanting food</h1></header>
<article><!-- Content --></article>
<!-- Back to Top Button -->
<div id="elevatorContainer" class="hide">
<div class="elevator_button"></div>
<a id="elevatorButton" class="elevator_button" role="button" aria-label="Scroll back to top" href="#top" title="Back to top">
<svg aria-hidden="true" viewBox="0 0 62.5 76" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd; clip-rule:evenodd; stroke-linejoin:round; stroke-miterlimit:2"><!-- <path> --></svg>
</a>
</div>
</main>
Das Icon selber blenden wir mit aria-hidden="true" für Screenreader aus. Dafür geben wir dem Button mit aria-label ein Label, das Screenreader stattdessen vorlesen.
Den Aufzug mit CSS stylen
Unser Gerüst ist fertig, nun müssen wir es noch in die richtige Form bringen.
Der Aufzug soll an einem Seil hängen, das aussieht, als wenn es oben am Browser festhängen würde. Den Aufzug-Container positionieren wir mit position:fixed, das Seil und den Aufzug setzen wir auf relative, damit ihre Position immer relativ zum Container ist. Dieser bekommt zudem top: -50%, damit wir später bei der Animation das Seil schwingen lassen können. Zuletzt stellen wir noch sicher, dass das Seil hinter dem Aufzug hängt, setzen z-index: 1 und für den Aufzug z-index: 5 (oder auf 2 oder 11, je nach Gusto).
Wir positionieren unseren Aufzug ähnlich wie das Seil und füllen den Hintergrund mit einer Farbe unserer Wahl, damit das Seil nicht durchscheint.
html {
scroll-behavior: smooth;
background-color: hsla(0, 0%, 83%, 0.18);
}
header, article {
margin: 0 10rem 2rem 3rem;
}
.hide {
display: none;
}
.show {
display: block;
position: fixed;
right: 3.55rem;
top: -50%;
bottom: 22vh;
overflow: visible;
}
.elevator_rope {
z-index: 1;
display: block;
position: relative;
top: 0;
background-color: black;
width: 2px;
height: 120vh;
margin: 0 auto;
}
.elevator_button {
z-index: 5;
background-color: transparent;
display: block;
position: relative;
width: 2.5rem;
height: 2.5rem;
}
.elevator_button:hover {
-webkit-box-shadow: 0px 2px 8px 1px hsla(177, 47%, 47%, 1);
box-shadow: 0px 2px 8px 1px hsla(177, 47%, 47%, 1);
}
.elevator_button:active {
-webkit-box-shadow: 0px 2px 8px 1px hsla(178, 49%, 30%, 1);
box-shadow: 0px 2px 8px 1px hsla(178, 49%, 30%, 1);
}
svg {
background-color: white;
display: block;
}
Die Werte für bottom habe ich mit der Einheit vh angegeben, damit die Länge des Seils immer von der Höhe des Viewports abhängig ist.
Außerdem möchte ich, dass das Scrollen möglichst sanft vonstattengeht. Das erreichen wir mit scroll-behavior: smooth. Vor allem für Personen, die (plötzliche) visuelle Reize nicht gut verarbeiten können, kann das einen großen Unterschied machen. Im nächsten Teil werden wir auf das Thema noch einmal genauer eingehen.
Den Aufzug erst weiter unten anzeigen
Nun ist der Aufzug aber immer zu sehen, auch wenn gar nicht gescrollt werden muss. Das ist nicht schön und kann Besucher*innen verwirren. Also verstecken wir ihn und zeigen ihn erst, wenn runtergescrollt wurde:
// Show elevator when having scrolled down 80vh
myID = document.getElementById("elevatorContainer");
var showElevatorFunc = function() {
var y = window.scrollY;
var vh = (window.innerHeight)*0.8;
if (y >= vh) {
elevatorContainer.className = "show"
} else {
elevatorContainer.className = "hide"
}
};
window.addEventListener("scroll", showElevatorFunc);
Was passiert hier? Zunächst setzen wir die Variable y: Diese gibt an, dass es um das Scrollen geht. Die Variable vh gibt die innere Höhe des Browserfensters an. Wir wollen, dass der Aufzug nach 80% der Viewporthöhe angezeigt wird, also multiplizieren wir window.innerHeight mit 0.8. Das entspricht 80vh. Für unsere Testzwecke ist das ausreichend, für echte Projekte würde ich 300vh bis 400vh angeben.
Wenn der Browser nun den entsprechenden Punkt erreicht, setzen wir die Klasse für den elevatorContainer auf “show”. Ansonsten bleibt oder wird er verborgen.
Den Button für Screenreader optimieren
Unser Aufzug ist schon recht barrierefrei, aber eins fehlt uns noch. Wird ein Screenreader genutzt, aktiviert man ein Button-Element normalerweise durch die Enter-Taste oder die Leertaste. Wenn wir also einen Link als Button ausgeben, müssen wir auch dafür sorgen, dass er sich so verhält.
Das erreichen wir mit ein paar Zeilen JavaScript:
// Make Link with role="button" clickable with space bar
(document.querySelector('a[role="button"]')).addEventListener("keydown", function(a) {
var b = void 0 !== a.key ? a.key : a.keyCode;
if ("Enter" === b || 13 === b || 0 <= ["Spacebar", " "].indexOf(b) || 32 === b) {
a.preventDefault(), this.click();
}
});
Der Code hierfür stammt von
Tyler auf dev.to . Solange der Focus auf auf einem Link mit role="button liegt, lässt dieser sich auch mit der Leertaste betätigen. Nun lässt sich der Button auch mit der Leertaste aktivieren.
Unser Zwischenergebnis
Unser Aufzug funktioniert und erscheint erst, wenn wir etwas heruntergescrollt haben. Theoretisch wäre er so bereits nutzbar, aber für ein Real-Life-Projekt bräuchte es unbedingt einen Hinweis, was er bewirkt, etwa durch einen Text unter der Grafik.
Wer etwas mit dem Code herumspielen möchte, findet Teil 1 hier bei CodePen: https://codepen.io/althausme/pen/ZEyvgqg .
Im zweiten Teil werden wir den Aufzug animieren und schauen, wie weit wir damit gehen können. Kommt wieder oder abonniert meinen RSS Feed, damit ihr ihn nicht verpasst. ✌
Weiterlesen:
- Zu der Frage, wie man SVG-Grafiken einbinden sollte, schaut mal bei MDN Adding vector graphics to the Web oder bei CSS-TRICKS Using SVG .
- Ebenfalls bei MDN könnt ihr euch über das Thema
role="button"und Barrierefreiheit informieren: ARIA: button role - Zum Thema UX bei Back-to-Top-Buttons hat Hoa Loranger hier geschrieben: Back-to-Top Button Design Guidelines
Titelbild via Unsplash von Maxim Hopman
Edit vom 20.09.2021: Die erste Version des Artikels enthielt CSS, das nun aktualisiert wurde.