Back to top
Importing
Add rh-back-to-top to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<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>
<script type="module">
import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
<style>
#overflow {
min-block-size: calc(100dvh + 401px);
}
p {
font-weight: bold;
}
</style>rh-back-to-top
Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content page.
| Slot Name | Description |
|---|---|
|
Text for the back to top link |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
visible |
visible |
Flag to always show back to top button, defaults to false. |
|
|
scrollable-selector |
scrollableSelector |
Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events |
|
|
scroll-distance |
scrollDistance |
Distance from the top of the scrollable element to trigger the visibility of the back to top button |
|
|
href |
href |
Page fragment link to target element, must include hash ex: #top |
|
|
| Part Name | Description |
|---|---|
trigger |
back to top link anchor element |
| Token | Copy |
|---|---|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-color-accent-base-on-light
|
|
--rh-color-border-strong-on-dark
|
|
--rh-color-interactive-primary-hover-on-light
|
|
--rh-color-text-primary-on-dark
|
|
--rh-font-size-body-text-xs
|
|
--rh-line-height-body-text
|
|
--rh-space-3xl
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
--rh-space-xs
|
|
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.
