Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tilbage til toppen
Tilbage til toppen-knappen hjælper brugeren med at navigere til toppen af en lang side på en let måde uden at miste overblikket.
Sådan bruges komponenten
Anvendes til
Bruges i forbindelse med lange sider, hvor brugeren kan befinde sig langt fra de øvrige knapper og interaktioner på siden.
Anvendes ikke til
Anvendes ikke som navigationsknap eller på anden vis til andet end at sende brugeren til toppen af siden.
Vejledning
Tilbage til toppen-knappen placeres nederst til højre på siden. Knappen er “sticky”, således at den altid er placeret det samme sted.
På sider, der ikke har trinindikator eller venstremenu, vises tilbage til toppen-knappen efter brugeren har scrollet 2 skærmsiders længde. Ligeledes vil knappen forsvinde igen, når brugeren scroller op og der er mindre end 2 skærmsiders længde til toppen af siden.
På sider med trinindikator eller venstremenu vises knappen, når sidste element i venstre side (af trinindikatoren eller venstremenuen) er ude af syne for brugeren eller hvis brugeren har scrollet 2 skærmsiders længde.
Bemærk at placeringen af knappen i højre side afviger fra den generelle anbefaling om venstrestilling af indholdet i én kolonne (se Layout). Denne beslutning er baseret på etableret best practice vedrørende “til toppen”-knapper (Loranger, 2017). Dette gør yderligere risikoen for at overlappe andet indhold på siden mindre.
Det anbefales at lave en scroll-animation til toppen, når der klikkes på knappen, da det understøtter brugerens fornemmelse af, hvor de er på siden.
Komponenten på mobil
På mobil anvendes knappen uden tekst for at spare plads på skærmen.
Se komponenten i eksempelløsninger
Referencer
Installation
HTML Struktur
<a class="back-to-top-button button button-tertiary d-print-none" href="#top">
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#arrow-upward"></use></svg>
<span class="sr-only">Til toppen af siden</span>
<span class="d-none d-md-inline-block" aria-hidden="true">Til toppen</span>
</a>Husk at have et id i toppen af siden, f.eks. id="top", som tilbage til toppen-knappen kan linke til. Dette id skal ligge lige før komponenten Gå til sidens indhold.
Tilbage til toppen-knappen bør altid være det første element i en sides footer.
Javascript
Tilbage til toppen-knappen kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:
new DKFDS.BackToTop(document.getElementById('BACK-TO-TOP-ID')).init();Bemærk, at JavaScripten udelukkende kontrollerer, hvornår knappen skal vises eller skjules. Hvis tryk på knappen skal lave en scroll-animation til toppen, skal man selv stå for implementeringen af denne animation.
Knappen vises og skjules forskelligt, hvis der er en venstremenu eller trinindikator til stede på siden. Det er derfor vigtigt, at HTML for disse komponenter er anvendt som beskrevet.