# BackTop 回到顶部/底部

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/back-top/freepass)
- 平台：PC
- 维护者：王斌
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[BackTop]

## 代码演示

### 基础用法

最简单的用法

```jsx
import * as React from 'react';
import { BackTop } from '@weapp/ui'

export default class BasicDemo extends React.Component<any, any> {

  getContainer = () => {
    return document.getElementsByClassName('scroll')[0] as HTMLElement
  }

  onClick = (e: any) => {
    console.log('onClick:', e)
  }

  render() {
    return (
      <div>
        <BackTop
          getContainer={this.getContainer}
         
          onClick={this.onClick}
          style={{ position: 'absolute',bottom: 'calc(var(--hd) * 70)' }}
        />
        <div style={{ height: '360px' }}>
          向下滚动页面,就会看到,回到顶部按钮<br />
        </div>
      </div>
    );
  }
}
```

### 自定义样式

可以自定义回到顶部按钮的样式

```jsx
import * as React from 'react';
import { BackTop } from '@weapp/ui'

export default class CustomDemo extends React.Component<any, any> {

  getContainer = () => {
    return document.getElementsByClassName('scroll')[0] as HTMLElement
  }

  render() {
    return (
      <div>
        <BackTop
          getContainer={this.getContainer}
         
          style={{ position: 'absolute', bottom: 'calc(var(--hd) * 15)', borderRadius: 10 }}
          visibilityHeight={500}
        >
          <div>🚀</div>
        </BackTop>
        向下滚动页面,就会看到🚀按钮
      </div>
    );
  }
}
```

### 回到底部

逻辑与回到顶部完全相反

```jsx
import * as React from 'react';
import { BackTop } from '@weapp/ui'

export default class BasicDemo extends React.Component<any, any> {

  getContainer = () => {
    return document.getElementsByClassName('scroll')[0] as HTMLElement
  }

  onClick = (e: any) => {
    console.log('onClick:', e)
  }

  onFadeChange = (fade: boolean) => {
    console.log('onFadeChange-fade', fade)
  }

  render() {
    return (
      <div>
        <BackTop
          getContainer={this.getContainer}
         
          onClick={this.onClick}
          style={{ position: 'absolute', bottom: 'calc(var(--hd) * 125)', background: 'pink' }}
          reverse
          onFadeChange={this.onFadeChange}
        />
        <div style={{ height: '360px' }}>
          回到底部按钮默认展示，当快要滚动到底部的时候才会隐藏<br />
        </div>
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| getContainer | 指定滚动的容器 | () => HTMLElement / Window / Document | 否 | window |
| style | 复写样式 | React.CSSProperties | 否 |  |
| className | 复写类名 | string | 否 |  |
| onClick | 点击回调事件 | (e: React.MouseEvent) => void | 否 |  |
| children | 自定义渲染内容 | React.ReactNode | 否 |  |
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 否 |  |
| reverse | 改为回到顶部 | boolean | 否 |  |
| onFadeChange | 当显隐状态改变时的回调事件 | (fade: boolean) => void | 否 |  |
