# Scroll to top (goodtabs UI)

A corner button that appears after scrolling and brings the page back to the top.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/scroll-to-top.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/scroll-to-top`

## Usage

```tsx
import { ScrollToTop } from "@/components/ui/scroll-to-top"

<ScrollToTop />
<ScrollToTop container={listRef} threshold={200} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| threshold | `number` | `400` | How far down, in px, before the button appears. |
| label | `string` | `"Back to top"` | Accessible name of the icon button. |
| container | `RefObject<HTMLElement | null>` |  | A scrolling element to watch and scroll instead of the window. |
| position | `"fixed" | "absolute"` | `"fixed", or "absolute" with container` | fixed sits on the viewport, absolute in the nearest positioned parent. |
| variant | `Button variant` | `"outline"` | Any shadcn button variant. |
| size | `Button size` | `"icon"` | icon is 32px, icon-sm is 28px. |

## When to use

- Long pages such as docs, changelogs and feeds where the header scrolls away
- Scrolling panels and logs that grow past a few screens
- Anywhere a person would otherwise drag the scrollbar back up

## When not to use

- Short pages that fit in one or two screens; the button would never appear
- Pages with a sticky header that already holds a link to the top
- Over content that needs the bottom right corner, such as a chat composer

## Notes for agents

- Hidden until the scroll position passes threshold; while hidden it is inert, so it is skipped by Tab and screen readers
- With container it switches to absolute positioning: put it as a sibling of the scroll box inside a relative wrapper, not inside the box
- Fades in with opacity and a 4px rise over 150ms; under prefers-reduced-motion it does not move and scrolls with behavior auto
- Override the offset with className, for example right-3 bottom-3

Docs: https://ui.goodtabs.co/components/scroll-to-top