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 & Examples

Default

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

default.tsx


<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 API

ScrollToTopButton props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Optional accessible description id applied to the button.
`aria-label`	`string`	No	aria	`"Scroll to top"`	Accessible label for the scroll-to-top button.
`aria-labelledby`	`string`	No	aria	`—`	Optional id of an external label element applied to the button. When provided, this takes precedence over "aria-label" for accessible naming.
`className`	`string`	No	styling	`—`	Additional custom class names for the root element of the component.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`id`	`string`	No	props	`—`	Optional id for the root element.
`offset`	`number`	No	props	`300`	The scroll offset (in pixels) from the top of the page at which the button becomes visible.
`role`	`React.AriaRole`	No	aria	`—`	Optional role for the outer wrapper if semantic grouping is needed.
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Optional rounding style applied to the button.
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Optional shadow style for the button.
`testId`	`string`	No	props	`dataTestId ?? "scroll"`	Optional test ID for testing frameworks.
`title`	`string`	No	props	`—`	Optional title attribute for the button. Defaults to the same value as "aria-label" when not provided.