BackTop
back-topReveals a control that smoothly returns a configured scroll container to the top.
Usage
Basic usage
Monitors window by default. After scrolling beyond visibilityHeight, the back to top button fades into the lower right corner. Click to scroll smoothly back to the top.
Scroll content row 1 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 2 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 3 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 4 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 5 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 6 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 7 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 8 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 9 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 10 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 11 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 12 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 13 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 14 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 15 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 16 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 17 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 18 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 19 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 20 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 21 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 22 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 23 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 24 - scroll down 80px and a back-to-top button appears in the lower right corner.
<BackTop visibilityHeight={400} />Custom content
children replaces the default up arrow icon, and can place text or custom nodes.
Scroll content row 1 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 2 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 3 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 4 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 5 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 6 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 7 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 8 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 9 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 10 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 11 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 12 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 13 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 14 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 15 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 16 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 17 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 18 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 19 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 20 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 21 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 22 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 23 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 24 - scroll down 80px and a back-to-top button appears in the lower right corner.
<BackTop visibilityHeight={400}>
<span className="px-2 text-xs font-medium">Top</span>
</BackTop>Specify scroll container
When the page scroll body is not window, target returns the container element, and both monitoring and backing fall on it.
Scroll content row 1 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 2 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 3 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 4 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 5 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 6 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 7 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 8 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 9 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 10 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 11 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 12 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 13 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 14 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 15 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 16 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 17 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 18 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 19 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 20 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 21 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 22 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 23 - scroll down 80px and a back-to-top button appears in the lower right corner.
Scroll content row 24 - scroll down 80px and a back-to-top button appears in the lower right corner.
const ref = useRef<HTMLDivElement>(null);
<div ref={ref} className="h-44 overflow-y-auto">{/* Long content */}</div>
<BackTop target={() => ref.current} visibilityHeight={80} />When to use
Use BackTop to reveal a floating button after a long page has scrolled beyond a threshold and return to the top when selected. Use Affix to pin arbitrary content, or Anchor for navigation among page sections.
Import
import { BackTop } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| target | () => HTMLElement | Window | null | window | Container to observe and scroll to the top. |
| visibilityHeight | number | 400 | Scroll distance in pixels before the button fades in. |
| className | string | - | The default uses fixed at the viewport's lower-right corner; override with absolute for a local container. |
| aria-label | string | Follows ConfigProvider | Accessible name for the back-to-top action; falls back to the current locale's default wording. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | () => void | Called after the click initiates scrolling. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom floating-button content. Defaults to an upward arrow whose built-in Chinese aria-label is "\u56de\u5230\u9876\u90e8", meaning “Back to top.” |
Example
// Observe window and appear after 400px
<BackTop visibilityHeight={400} />
// Stay inside a local scroll frame
const ref = useRef<HTMLDivElement>(null);
<div className="relative">
<div ref={ref} className="h-44 overflow-y-auto">{/* Content */}</div>
<BackTop target={() => ref.current} visibilityHeight={80} className="absolute bottom-3 right-3" />
</div>Usage guidelines
- The default fixed positioning targets the full viewport. Inside a local scroller, both pass that element through
targetand override positioning withclassName="absolute ..."; otherwise the button sits at the page corner and listens to window instead of the container. - Reduced-motion support is built in and changes
smoothscrolling toauto; consumers need no extra handling.
Related
The default back-to-top label follows ConfigProvider; pass aria-label to override it.
Tabs · Breadcrumb · Pagination · Anchor · Affix · Stepper