vue中實現滾動條緩慢向上移動的效果
阿新 • • 發佈:2018-12-12
.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; }, }
效果