当前位置 博文首页 > IT13333的博客：vue 项目中 返回顶部 完美实现 值得收藏
新建一个组件 直接复制下面整个代码 需要的地方引入 就完美解决问题
<template>
<div class="scrollTop">
<button v-show="flag_scroll" @click="backTop">
返回顶部
</button>
</div>
</template>
<script>
export default {
name: 'scrollTop',
data() {
return {
flag_scroll: false,
scroll: 0,
}
},
methods: {
//返回顶部事件
backTop() {
// var obj= document.getElementsByClassName('scrollTop')[0].scrollTop
var objwin=document.documentElement.scrollTop
var timer= setInterval(function(){
document.documentElement.scrollTop-=20
if(document.documentElement.scrollTop<=0){
clearInterval(timer)
}
},1)
// console.log(obj);
console.log(objwin);
},
//滑动超过500时显示按钮
handleScroll() {
let scrollobj=document.body.scrollTop+document.documentElement.scrollTop
console.log(scrollobj)
if (scrollobj > 500) {
this.flag_scroll = true
} else {
this.flag_scroll = false
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
created() { },
}
</script>
<style scoped>
</style>
