synthetic

BackTop

A floating button that appears after scrolling down and jumps back to the top.

Task listScroll the list: the button appears after 80px

Draft launch checklist

Research

Book crew interviews

Ops

Icon audit

Design

Offline sync for tasks

Eng

Harbour homepage

Design

Brand palette

Design

Rota export

Ops

Draft launch checklist

Research

Book crew interviews

Ops

Icon audit

Design

Offline sync for tasks

Eng

Harbour homepage

Design

Brand palette

Design

Rota export

Ops

Draft launch checklist

Research

Book crew interviews

Ops

Icon audit

Design

Offline sync for tasks

Eng

Harbour homepage

Design

Brand palette

Design

Rota export

Ops

In context

Inbox on a phoneScroll the screen: the button sits inside the bezel

Inbox

Draft launch checklist

Research, Fri

Book crew interviews

Ops, no due date

Icon audit

Design, no due date

Offline sync for tasks

Eng, no due date

Harbour homepage

Design, no due date

Brand palette

Design, no due date

Rota export

Ops, no due date

Draft launch checklist

Research, Fri

Book crew interviews

Ops, no due date

Icon audit

Design, no due date

Offline sync for tasks

Eng, no due date

Harbour homepage

Design, no due date

Brand palette

Design, no due date

Rota export

Ops, no due date

Draft launch checklist

Research, Fri

Book crew interviews

Ops, no due date

Icon audit

Design, no due date

Offline sync for tasks

Eng, no due date

Harbour homepage

Design, no due date

Brand palette

Design, no due date

Rota export

Ops, no due date

Props

Prop	Type	Required	Default
`visibilityThreshold`	`number \| undefined`	No	300
`target`	`(() => HTMLElement \| Window) \| undefined`	No	() => window
`onClick`	`(() => void) \| undefined`	No	—
`children`	`ReactNode`	No	—
`className`	`string \| undefined`	No	—

target

target?: () => HTMLElement | Window (default () => window) is a deliberate function-prop exception: there is no serializable way to name the window or a scroll container. It chooses what is tracked and scrolled; the button itself is position: fixed, so a demo box needs a transform to contain it.

Reduced motion

Scrolling back uses smooth scroll unless prefers-reduced-motion is set, in which case it jumps. Checked via matchMedia.

data-rebar-* attributes

data-rebar-component="back-top" on the button.

Migrating to Ant Design

AntD's BackTop is a close direct equivalent: visibilityThreshold, target and onClick map directly.