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

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>
  );
}

More examples

Scroll to reveal the button.

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>
  );
}

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.

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

#BackTop

#Basic usage

#More examples

#Usage