ScrollToTopButton

The ScrollToTopButton component displays a floating button that appears when you scroll down a page and allows users to quickly scroll back to the top.

Usage

Default

Scroll down the page to make the ScrollToTopButton appear. This demo uses a tall container to simulate a real scroll environment.


<div style={{ height: "200vh", padding: "2rem" }}>
  <p style={{ maxWidth: 600 }}>
    Scroll down the page to make the ScrollToTopButton appear. This demo
    uses a tall container to simulate a real scroll environment.
  </p>
  <ScrollToTop />
</div>

Props

Data table
	Type	Description
aria-describedby	string	Optional accessible description id applied to the button.
aria-label	string	Accessible label for the scroll-to-top button.
aria-labelledby	string	Optional id of an external label element applied to the button. When provided, this takes precedence over "aria-label" for accessible naming.
className	string	Additional custom class names for the root element of the component.
data-testid	string	Test identifier for the component, used to target it in testing frameworks.
id	string	Optional id for the root element.
offset	number	The scroll offset (in pixels) from the top of the page at which the button becomes visible.
role	React.AriaRole	Optional role for the outer wrapper if semantic grouping is needed.
rounding	RoundingType	Optional rounding style applied to the button.
shadow	ShadowType	Optional shadow style for the button.
title	string	Optional title attribute for the button. Defaults to the same value as "aria-label" when not provided.
wrapperAriaLabel	string	Optional accessible label for the wrapper when a semantic role is used.