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 the getting started page.
