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 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 2 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 3 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 4 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 5 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 6 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 7 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 8 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 9 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 10 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 11 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 12 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 13 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 14 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 15 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 16 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 17 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 18 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 19 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 20 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 21 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 22 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 23 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 24 —— After scrolling down to 80px, 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 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 2 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 3 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 4 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 5 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 6 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 7 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 8 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 9 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 10 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 11 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 12 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 13 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 14 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 15 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 16 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 17 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 18 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 19 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 20 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 21 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 22 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 23 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 24 —— After scrolling down to 80px, 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 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 2 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 3 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 4 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 5 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 6 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 7 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 8 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 9 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 10 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 11 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 12 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 13 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 14 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 15 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 16 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 17 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 18 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 19 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 20 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 21 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 22 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 23 —— After scrolling down to 80px, a back-to-top button appears in the lower right corner.
Scroll content row 24 —— After scrolling down to 80px, 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. |
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