# BackToTop 回到顶部

> 回到顶部组件，可以自定义样式，快速实现回到顶部功能。

### 基础用法

::: demo 组件 BackToUp 使用示例

```vue
<template>
  <div class="components-container">
    <div class="placeholder-container">
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
      <div>测试</div>
    </div>
    <!-- you can add element-ui's tooltip -->
    <el-tooltip placement="top" content="回到顶部">
      <dg-back-to-up
        :custom-style="myBackToTopStyle"
        :visibility-height="300"
        :back-position="50"
        transition-name="fade"
      />
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'BackToTopDemo',
  data() {
    return {
      // customizable button style, show/hide critical point, return position
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1', // 按钮的背景颜色 The background color of the button
      },
    }
  },
}
</script>

<style scoped>
.placeholder-container div {
  margin: 10px;
}
</style>
```

:::
`

## API

| 属性             | 说明       |   类型   | 默认值 |
| ---------------- | ---------- | :------: | :----: |
| visibilityHeight | 可视高度   | `Number` |        |
| backPosition     | 返回定位   |  `Arr`   |        |
| customStyle      | 自定义样式 | `Object` |        |
| transitionName   | 转换名称   | `String` |        |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.9（2020-03-07）

- 完善文档
