
<script >
export default {
	data() {
		return {
			dom: null
		};
	},
    methods: {
		onclick () {
			console.log('onclick')
		}
    },
    mounted() {
		this.dom = document.querySelector('#scrollbar').children[0];
	}
  }
</script>
<style>
	
</style>

## BackTop 回到顶部
---------------------

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

### 何时使用

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

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

### 基本用法
:::demo
```html
<div>
	向下滚动可以看到右下角的灰色按钮。
	<kc-backtop :target="dom"></kc-backtop>
</div>

<script >
	export default {
    	data() {
    		return {
    			dom: null
    		};
    	},
        mounted() {
    		this.dom = document.querySelector('#scrollbar').children[0];
    	}
      }
</script>

```
:::

### 设置距右下角的距离
:::demo
```html
<div>
	向下滚动可以看到右下角的灰色按钮。
	<kc-backtop :target="dom" :bottom="30" :right="30" :visible-height=100></kc-backtop>
</div>

<script >
	export default {
    	data() {
    		return {
    			dom: null
    		};
    	},
        mounted() {
    		this.dom = document.querySelector('#scrollbar').children[0];
    	}
      }
</script>

```
:::

### 自定义样式
可以使用类名 `back-top-blue` 自定义回到顶部按钮的样式，限制宽高：40px * 40px。
:::demo
```html
<div>
	向下滚动可以看到右下角的蓝色按钮。
	<kc-backtop :target="dom" @click="onclick" :visible-height=100>
		<div class="back-top-blue">UP</div>
	</kc-backtop>
</div>
<style>
 .back-top-blue {
	 position: fixed;
	 bottom: 100px;
	 width: 40px;
	 height: 40px;
	 background: #1088e9;
	 border-radius: 4px;
 }
</style>
<script >
	export default {
    	data() {
    		return {
    			dom: null
    		};
    	},
        methods: {
    		onclick () {
    			console.log('onclick')
    		}
        },
        mounted() {
    		this.dom = document.querySelector('#scrollbar').children[0];
    	}
      }
</script>

```
:::

### BackTop Attributes
| 参数 | 说明 | 类型 |默认值 |
| ---- | ---- | ---- |---- |
| target | 设置需要监听其滚动事件的元素 | HTMLElement/String |window|
| visible-height | 滚动高度达到此参数值才出现 BackTop | number |200|
| bottom | 设置距离底部的距离 | number |50|
| right | 设置距离右部的距离 | number |80|

### Event
| 事件名称 | 说明 | 参数 |
| ---- | ---- |---- |
| click | 点击按钮的回调函数 |-|

