# Totop

返回页面顶部的操作按钮。

## 使用场景

* 当页面内容区域比较长时；

* 当用户需要频繁返回顶部查看相关内容时。

### 最简单的用法

---demo
```js
import { Totop } from 'amos-framework';

ReactDOM.render((
<div>
  <Totop to={10} />
  滚动到底部，在右下显示
  <strong style={{ color: 'grey' }}> 灰色 </strong>
  按钮.
</div>
), _react_runner_);
```
---demoend

### 自定义样式

可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。

---demo
```js
import { Totop } from 'amos-framework';

const _style = {
  height: 40,
  width: 40,
  lineHeight: '40px',
  borderRadius: 4,
  backgroundColor: 'red',
  color: '#fff',
  textAlign: 'center',
  fontSize: 20
};

ReactDOM.render((
<div>
  <Totop to={10} style={{ bottom: 100 }}>
    <div style={_style}>UP</div>
  </Totop>
  滚动到底部，在右下显示
  <strong style={{ color: 'red' }}> 红色 </strong>
  按钮.
</div>
), _react_runner_);
```
---demoend

## API

> 有默认样式，距离底部 `60px`，可覆盖。
> 自定义样式宽高不大于 `42px`。

| params        | type               | default       | description     |
|-------------|----------------|--------------------|--------------|
| to | Number | 200  | 触发 `Totop`的滚动值 |
| onClick | Function | - | 点击按钮的回调函数 |
| prefixCls | string | `amos-totop` | 样式前缀 |
| className | string | - | Totop外层div 样式名 |
| title | string | - | Totop外层div 样式名 |
| getTarget | `func: () => DomElement` | - | 获取指定的节点 |
| children | React.Node/React.element | - | Totop自定义内容 |

> 注意： totop组件，默认为 `window scroll` 触发, 即需要 `body` 节点进行scroll。如果无法使用 `Totop`,检查 `scroll` 事件是否未被触发，以及 `scrollTop` 是否有效。
同时，如果 `overflow：auto/scroll/hidden` 设置在跟节点，或者第一个被引入时，即使后续style 中覆盖之前的hidden，也会造成scroll滑动监听整体失效。

如果 `body` 设置了 `overflow: hidden`，此时可以自定义 `getTarget` 以获取能够监听滚动的容器。

示例：

```js
// 采用 id 方式
<div className="rootview" id="rootview">
  <Totop style={{ bottom: 100 }} getTarget={() => document.getElementById('rootview')}>
    <div style={style}>UP</div>
  </Totop>
  {this.props.children}
</div>

// 采用 ref 的方式，同级前一个兄弟节点
<React.Fragment>
  <div className="rootview" ref={node => this.targetRef = node}>
    {this.props.children}
  </div>
  <Totop style={{ bottom: 100 }} getTarget={() => this.targetRef}>
    <div style={style}>UP</div>
  </Totop>
</React.Fragment>
```