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

Sortable data table
Prop	Type	Default	Description
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Corner rounding for the button.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style for the button.
offset	number	300	Scroll offset (in px) before the button appears.
className	string	-	Custom class name for the button.
data-testid	string	"scroll"	Test ID for querying the component in tests.