vantUI回到顶部（BackTop）

<template>

<div>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<p>12</p>

<van-button

color="rgba(0,0,0,.3)"

round

class="backTop"

size="small"

@click="backTop"

v-show="scrollType"

>

<van-icon class="icon-backTop" name="back-top" size="25" />

</van-button>

</div>

</template>

<script>

export default {

name: 'backTop',

data () {

return {

scrollType: false, // 控制按钮显示和隐藏

timerId: null,

scrollTop: 0

}

},

// 组件创建监听scroll此方法

mounted () {

window.addEventListener('scroll', this.handleScoll, true)

},

// 组件销毁移除监听

destroyed () {

window.removeEventListener('scroll', this.handleScoll)

window.clearInterval(this.timerId)

},

methods: {

backTop () {

this.timerId = setInterval(() => {

// 给返回增加动画效果

const upSpeed = Math.floor(-this.scrollTop / 5)

document.documentElement.scrollTop = this.scrollTop + upSpeed

if (this.scrollTop === 0) {

clearInterval(this.timerId)

}

}, 30)

},

handleScoll (ev) {

console.log(window.pageYOffset);

// 当滚动的距离大于700 时出现该按钮

this.scrollTop = window.pageYOffset

if (window.pageYOffset / 100 > 1) {

this.scrollType = true

} else {

this.scrollType = false

}

}

}

}

</script>

<style scoped lang='less'>

.backTop {

position: fixed;

bottom: 5.4rem;

right: 2.2rem;

z-index: 999;

border: none;

}

.van-button{

width: 40px;

background:rgb(13, 255, 69) !important;

}

</style>