Back to Top

A floating button that appears once the page or a ScrollArea is scrolled down, and scrolls it back to the top.

Beta

Web

iOS

Android

@advui/core

Source

In a ScrollArea

Preview

Code

Build 240 passed2 min ago

Build 239 passed9 min ago

Build 238 passed16 min ago

Build 237 failed23 min ago

Build 236 passed30 min ago

Build 235 passed37 min ago

Build 234 passed44 min ago

Build 233 passed51 min ago

Build 232 failed58 min ago

Build 231 passed65 min ago

Build 230 passed72 min ago

Build 229 passed79 min ago

Build 228 passed86 min ago

Build 227 failed93 min ago

Build 226 passed100 min ago

Build 225 passed107 min ago

Build 224 passed114 min ago

Build 223 passed121 min ago

Build 222 failed128 min ago

Build 221 passed135 min ago

Build 220 passed142 min ago

Build 219 passed149 min ago

Build 218 passed156 min ago

Build 217 failed163 min ago

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { BackToTop, ScrollArea, useBackToTop } from '@advui/core'

// The page (web):
<BackToTop />

// A ScrollArea (web, iOS and Android):
const scroll = useBackToTop()
<Box position="relative" flex={1}>
  <ScrollArea {...scroll.scrollProps}>…</ScrollArea>
  <BackToTop scroll={scroll} />
</Box>

API reference

BackToTop

A Floating Action Button: it also takes `variant`, `size` and `placement` (defaults `surface`, `sm` and `bottom-end`).

Prop	Type	Default	Description
`scroll`	`BackToTopScroll`	—	A ScrollArea to watch, from `useBackToTop`. Without it, the button watches the page on web and is not shown on iOS and Android.
`threshold`	`number`	`400`	Pixels the page is scrolled before the button shows.
`label`	`string`	`'Back to top'`	Accessible name.
`icon`	`ReactNode`	—	In place of the up chevron.

useBackToTop(options)

`useBackToTop({ threshold? })` returns `{ scrollProps, visible, scrollToTop }`. Spread `scrollProps` (a ref, `onScroll` and `scrollEventThrottle`) on a ScrollArea or a React Native ScrollView.

Prop	Type	Default	Description
`threshold`	`number`	`400`	Pixels scrolled before the button shows.

Accessibility

A button named “Back to top” (label). It is not in the page until it is needed, so it adds no Tab stop at the top.
On web, focus moves to the top with the scroll: to the ScrollArea, or to the page, so the next Tab goes to the first link and not on from the bottom.
Scrolls smoothly, or at once when the user asks for reduced motion.

Keyboard interactions
Key	Action
`Enter / Space`	Scrolls to the top and moves focus there.

Platform notes

Web

Without scroll, it watches the window and stays in its corner (position: fixed).

iOS

The screen does not scroll by itself: pass scroll from useBackToTop. Focus for VoiceOver is not moved after the scroll.

Android

The screen does not scroll by itself: pass scroll from useBackToTop. Focus for TalkBack is not moved after the scroll.

Since v0.14.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousVisually Hidden

NextButton