Back to top
On this page
On this page
Overview
Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content page.
Edit element properties
import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';#overflow {
min-block-size: calc(100dvh + 401px);
}
p {
font-weight: bold;
}<div id="overflow">
<p>Scroll down to reveal the back to top element</p>
<rh-back-to-top href="#">Back to top</rh-back-to-top>
</div>Flag to always show back to top button, defaults to false.
Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events
Distance from the top of the scrollable element to trigger the visibility of the back to top button
Page fragment link to target element, must include hash ex: #top
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- When content fills up more than two screens in length at medium and large breakpoints
- When content fills up more than four screens in length at small breakpoints
Example of a back to top button
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
