---
title: BackTo  回到顶/底部
group:
  title: 其他
  path: /BackTo
  order: 3
---

BackTo 是一个用于快速滚动到页面顶部或底部的浮动按钮组件，适用于长内容页面的导航场景

## 示例

<code src="../../examples/BackTo"></code>

## Props

| 属性              | 类型                                                    | 是否必传 | 默认值        | 说明                                                               |
| ----------------- | ------------------------------------------------------- | -------- | ------------- | ------------------------------------------------------------------ |
| topIcon           | `keyof typeof Icons \| React.ReactElement`              | 否       | 'ChevronUp'   | 回到顶部的图标                                                     |
| bottomIcon        | `keyof typeof Icons \| React.ReactElement`              | 否       | 'ChevronDown' | 回到底部的图标                                                     |
| enableTop         | `boolean`                                               | 否       | true          | 是否启用回到顶部                                                   |
| enableBottom      | `boolean`                                               | 否       | true          | 是否启用回到底部                                                   |
| className         | `string`                                                | 否       | -             | 自定义类名                                                         |
| style             | `React.CSSProperties`                                   | 否       | -             | 自定义样式                                                         |
| autoHideThreshold | `number \| { top: number; bottom: number } \| false`    | 否       | 30            | 自动隐藏阈值（距离顶部/底部像素）                                  |
| loading           | `boolean \| { top: boolean; bottom: boolean }`          | 否       | false         | 加载状态，显示旋转动画                                             |
| container         | `HTMLElement \| React.RefObject<HTMLElement> \| string` | 否       | undefined     | 滚动容器，可以是 DOM 元素、Ref 或 CSS 选择器，不提供则使用全局滚动 |
| position          | `fixed \| absolute`                                     | 否       | `fixed`       | 定位方式                                                           |
| onBackToTop       | `() => void`                                            | 否       | -             | 回到顶部的回调                                                     |
| onBackToBottom    | `() => void`                                            | 否       | -             | 回到底部的回调                                                     |