09 / Wayfinding

Scroll to Top Button

A floating way back after someone has moved down a long page or scroll area. It stays hidden near the top.

A short page about long pages

Give every section a job.

Start with the purpose

Say what the page helps someone do.

Keep the path clear

One primary action is usually enough.

Show the real thing

A working example beats another promise.

Answer the practical bits

Cover setup, ownership, and access.

Finish usefully

End with the next step and a way back.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function LongPage() {
  return (
    <>
      <main>{/* Long page content */}</main>
      <ScrollToTopButton />
    </>
  )
}

API

containerRefRefObject<HTMLElement>Scrolls a container instead of the page.

showAfternumberScroll distance before the button appears. Defaults to 320.

behavior"auto" | "instant" | "smooth"The requested scroll behavior. Defaults to smooth.

labelstringThe accessible name and title.

classNamestringClasses for placement and appearance.

...buttonPropsButtonHTMLAttributesNative button attributes.

Accessibility

The control is a named native button with a 48px target. It stays out of the tab order until the page has moved down, uses immediate scrolling when reduced motion is requested, and leaves keyboard navigation unchanged.

Dependencies

lucide-react, clsx, tailwind-merge