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
UsageLayoutBehaviorBest practicesUsageLayoutBehaviorBest practices

Usage

Back to top helps users get back to the top of the page quickly.

When to add

Back to top should be added to pages where a user would need to scroll through multiple screens worth of content. If a page is very short and does not require scrolling, back to top does not have to be added.

Layout

Placement

Users expect to see back to top in the bottom right corner, but it will overlap content in that area or when users scroll. This placement keeps it out of the way of important content, but still discoverable.

Back to top button in the bottom right corner of a desktop-sized screen, 48px from the edges of the viewport. Back to top buttons in the bottom right corner of a phone-sized screen, 24px from the edges of the viewport.

Behavior

When a user scrolls down the page, back to top appears in the bottom right corner. As the user continues to scroll, back to top should remain fixed until the user has reached the very bottom of the page. From here, when a user selects back to top, they will quickly be taken to the top of the page.

Best practices

Usage per page

Image of wireframe with one back to top button

Use only one back to top in the bottom right corner of a page.

 Image of wireframe with back to top buttons below each content section

Do not use multiple back to top buttons.

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