Scroll up
Back to top component to be used on longer pages
Scroll up auto display
Displays a link at the bottom right of the page after scrolling down one page height. On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
Adds a link at the end of the page with the o-scroll-up
class. The link is made up of 2 elements. The first element is a text with the .o-scroll-up-text
class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the .o-scroll-up-icon
class. For accessibility reasons, add a consistant title
to the link, and add aria-hidden='true'
to the icon.
You can see a sample on how it works by scrolling this page.
Scroll up static
Displays a link in the page with the arrow up icon.
Adds a link in the page with the o-scroll-up
and static
class.
You can let the text .o-scroll-up-text
display on all devices.