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.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Text for the back to top link |
Attributes
| 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 |
|
|
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
trigger
|
back to top link anchor element |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-back-to-top-background-color |
var(--rh-color-accent-base)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-xl
|
24px spacer |
|
--rh-color-text-primary-on-dark
|
Primary text color for dark theme |
|
--rh-color-text-primary-on-light
|
Primary text color for light theme |
|
--rh-color-accent-base
|
|
|
--rh-space-md
|
8px spacer |
|
--rh-border-radius-pill
|
Pill border radius; Example: Label |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-color-border-strong-on-dark
|
Strong border color (dark theme) |
|
--rh-color-border-strong-on-light
|
Strong border color (light theme) |
|
--rh-color-interactive-primary-hover
|
|
|
--rh-font-size-body-text-xs
|
12px font size |
|
--rh-space-xs
|
4px spacer |
|
--rh-space-3xl
|
48px spacer |
|
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.
