Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Back to top

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewUsage guidelinesUsage guidelinesUsage guidelinesUsage guidelinesAccessibilityStatusWhen to useStatus checklistOverviewUsage guidelinesUsage guidelinesUsage guidelinesUsage guidelinesAccessibilityStatusWhen to useStatus checklist

Overview

Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content page.

Customizing the background color
.custom-theme {
--rh-back-to-top-background-color: var(--custom-brand-color);
}
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>

Controls the visibility behavior of the back to top button.

  • undefined (default) - Button appears automatically after scrolling past scroll-distance
  • always - Button is always visible, ignoring scroll position

Usage guidelines

  • Use the default behavior for most cases to avoid cluttering the viewport
  • Use visible="always" only for testing or special use cases where the button should be permanently visible regardless of scroll position
Always visible
<rh-back-to-top visible="always">Back to top</rh-back-to-top>

CSS selector for the element to monitor for scroll events.

When not provided, the component monitors the window's scroll position (default behavior). When provided, monitors the specified element's scroll position instead.

Usage guidelines

  • Use the default (window scrolling) for standard page layouts
  • Set a selector when the main scrollable content is within a specific container element
  • The selector must point to a scrollable element (with overflow: auto or scroll)
  • Useful for single-page applications with scrollable panels
Monitor a specific container
<rh-back-to-top scrollable-selector="#main-content">Back to top</rh-back-to-top>

Distance in pixels from the top of the scrollable element to trigger button visibility.

The button appears when the user scrolls past this threshold and disappears when scrolling back above it. Default is 400px.

Usage guidelines

  • Default 400px works well for most standard page layouts
  • Increase for longer pages where users need more scroll before the button appears
  • Decrease for shorter pages or containers where users reach the bottom quickly
  • Consider page fold height and content length when customizing
Custom scroll threshold
<rh-back-to-top scroll-distance="800">Back to top</rh-back-to-top>

Page fragment identifier (anchor) for the target element to scroll to.

Must be a hash link pointing to an element ID on the page. The hash symbol (#) is automatically prepended if not provided.

Usage guidelines

  • The target element should be near the top of the page (typically the page title or skip link)
  • Ensure the target element has a matching id attribute
  • Common targets: #top, #main, #content, or the page's main heading ID
  • Without this attribute, clicking the button scrolls to the top of the page/container

Accessibility

  • The href creates a proper anchor link for keyboard and screen reader users
  • Provides a fallback navigation method if JavaScript is disabled
Link to page top
<rh-back-to-top href="#top">Back to top</rh-back-to-top>

Status

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

Status checklist

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify