Tilbage til toppen

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

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. Hvis siden indeholder et skip-link, bør id’et ligge umiddelbart før dette.

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.