ScrollToTop

Updated: May 9, 2025

Use this utility to improve navigation for long-scrolling pages. It's customizable with positioning and visibility logic based on scroll offset.

ScrollToTop

<ScrollToTop offset={100}>
  <Button size="s" prefixIcon="arrowUp">
    Top
  </Button>
</ScrollToTop>

Offset

Define how far the user must scroll before the button becomes visible.

Custom offset

<ScrollToTop offset={500}>
  <IconButton icon="chevronUp"/>
</ScrollToTop>

Custom style

The button can be customized using Flex props and additional className.

Custom style

<ScrollToTop position="relative" className="my-custom-style">
<Button size="s" variant="secondary" prefixIcon="chevronUp">
  Top
</Button>
</ScrollToTop>

API reference

Prop	Type	Default
offset How far down the page before it appears, in pixels.	number	300
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—

ComponentsScrollLock

ComponentsScrubber

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club