1. 程式人生 > >vue中實現滾動條緩慢向上移動的效果

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;
    },
}

效果 在這裡插入圖片描述