> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/back-top.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# BackTop

Return to the top of a page or scroll container.

## Basic usage


Scroll down to show the back-to-top button. 1

Scroll down to show the back-to-top button. 2

Scroll down to show the back-to-top button. 3

Scroll down to show the back-to-top button. 4

Scroll down to show the back-to-top button. 5

Scroll down to show the back-to-top button. 6

Scroll down to show the back-to-top button. 7

Scroll down to show the back-to-top button. 8

Scroll down to show the back-to-top button. 9

Scroll down to show the back-to-top button. 10

Scroll down to show the back-to-top button. 11

Scroll down to show the back-to-top button. 12

Scroll down to show the back-to-top button. 13

Scroll down to show the back-to-top button. 14

Scroll down to show the back-to-top button. 15

Scroll down to show the back-to-top button. 16

Scroll down to show the back-to-top button. 17

Scroll down to show the back-to-top button. 18

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/back-top/basic.tsx"
import { BackTop, ScrollArea } from '@ifhover/leaf-ui';

import { useRef } from 'react';

export function BackTopBasic() {
  const root = useRef<HTMLDivElement>(null);
  return (
    <div style={{ position: 'relative' }}>
      <ScrollArea ref={root} height={200} aria-label="Demo scroll area">
        {Array.from({ length: 18 }, (_, i) => (
          <p key={String(i)} style={{ padding: '4px 16px' }}>
            Scroll down to show the back-to-top button. {i + 1}
          </p>
        ))}
      </ScrollArea>
      <BackTop
        target={() => root.current}
        visibilityHeight={100}
        style={{ position: 'absolute', right: 16, bottom: 16 }}
      />
    </div>
  );
}
```

Expand code

## More examples


Scroll to reveal the button.

Top

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/back-top/advanced.tsx"
import { BackTop, ScrollArea } from '@ifhover/leaf-ui';

import { useRef } from 'react';

export function BackTopCustom() {
  const root = useRef<HTMLDivElement>(null);
  return (
    <div style={{ position: 'relative' }}>
      <ScrollArea ref={root} height={180} aria-label="Custom back-to-top button">
        <div style={{ height: 620, padding: 16 }}>Scroll to reveal the button.</div>
      </ScrollArea>
      <BackTop
        target={() => root.current}
        visibilityHeight={80}
        behavior="auto"
        style={{ position: 'absolute', right: 16, bottom: 16 }}
      >
        Top
      </BackTop>
    </div>
  );
}
```

Expand code

## Usage

The default target is the window. Return a scrolling element from target to use a custom container. The button appears after visibilityHeight and respects reduced-motion preferences.

## Types

Import these types for data, callbacks and refs.

```ts
import type { BackTopProps } from '@ifhover/leaf-ui';
```

## BackTopProps API

| Property           | Type                                  | Default    | Description                     |
| ------------------ | ------------------------------------- | ---------- | ------------------------------- |
| `target`           | `() => HTMLElement \| Window \| null` | —          | Scroll target or link target    |
| `visibilityHeight` | `number`                              | `400`      | Show after this scroll distance |
| `behavior`         | `ScrollBehavior`                      | `'smooth'` | Scroll behavior                 |