vue中实现滚动条缓慢向上移动的效果

.vue

//用于判断按钮何时显示 <div class="btn-top" v-if="scrollHeight > alarmHeight"> <el-button type="info" icon="el-icon-arrow-up" @click="btnTop"> </el-button> </div>

.js

mounted() { this.alarmHeight = document.body.clientHeight; window.addEventListener('scroll', this.handleScroll);//添加鼠标滚动事件 }, //销毁之前移除鼠标滚动事件 beforeDestroy () { window.removeEventListener('scroll', this.handleScroll) }, methods: { btnTop(){ document.documentElement.scrollTop-=30; if (document.documentElement.scrollTop>0) { var c=setTimeout(()=>this.btnTop(),16); }else { clearTimeout(c); //移除setTimeout } }, handleScroll(){ this.scrollHeight = this.alarmHeight*2/3 + document.documentElement.scrollTop || document.body.scrollTop; }, }

效果