Back to top

Provides a link that allows users to quickly navigate back to the top of a page.

Examples

A 'back to top' button can provide a seamless and user-friendly way for people to navigate a page of your website or application.

There is one style of the back to top button. It includes an up arrow icon and the text 'Back to top' and sits on the lower right side of a page.

Usage

It is written into the code of all Turas page templates and the display of this is delayed until the user has scrolled 2000 pixels down the page. The back to top link is hidden from devices 768px or lower.

Do:

make sure the 'back to top' button does not obscure content or stop the user interacting with elements on the page

Avoid:

changing the design of the button

References

Neilson Norman Group
Back-to-Top Button Design Guidelines

Copy


    <turas-back-to-top></turas-back-to-top>

Copy


    <button title="Back to top" class="scroll-to-top scrollup">
                    <span class='fa fa-arrow-up'></span>Back to top
            </button>

Optional parameters

No optional parameters

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the back to top button is in an expected tab order and doesn't cause a keyboard trap
check all interactive elements within the button are accessible with a keyboard meaning that you can activate it with either the return, enter and space keys
make sure keyboard focus is visible
test back to top button with screen readers to ensure they are announced as expected

Developer considerations

make sure to use the <button> element and not a <span> or <div> element as this will require additional JavaScript code to get the keyboard functions to work properly!

Alert boxes

Badges

Back to top

Examples

Usage

References

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?