vue+el-scrollbar 实现 返回顶部 功能

1. templete

   // 使用ref获取滚动条
   <el-scrollbar ref="queRef">
   	<div class="slideBox" v-if="questionData  && questionData.length >= 10"  @click="handleBackTop">
   		<img src="../../assets/image/dialog/down1.png" v-if="backTitle == 1" alt="">
   		<img src="../../assets/image/dialog/up.png" v-else alt="">
   	</div>
   </el-scrollbar>
   

2. js

   mounted(){
   	// 必须是要页面加载完成以后 
   	this.$nextTick(()=>{
   	// 需求：只有有的时候需要加 返回顶部按钮 
         if(this.$refs.queRef){
           // 监听滚动条
           this.$refs.queRef.wrap.addEventListener('scroll',this.scrollContent)		
         }
       })
   },
   methods:{
   	/*
   		需求：滚动条滑到底部展示 返回顶部 按钮
   			  滚动条默认展示 返回底部 按钮
   	*/ 
   	scrollContent(e) {
   		let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
   		let windowHeitht = e.target.clientHeight; //能看到的页面的高度
   		let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
   		let total = scrollTop + windowHeitht
   		// 到底了
   		if(total == scrollHeight){
   			// 返回顶部 按钮
   			this.backTitle = 2
   		}
   		// 回到顶部 
   		if(scrollTop == 0) {
   			// 返回底部 按钮
   			this.backTitle =1
   		} 
   	},
   	// 点击按钮
   	handleBackTop(){
   		let scrollbarEl = this.$refs.queRef.wrap
   		let scrollTop = this.$refs.queRef.wrap.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
   		let windowHeitht = this.$refs.queRef.wrap.clientHeight; //能看到的页面的高度
   		let scrollHeight = this.$refs.queRef.wrap.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
   		let total = scrollTop + windowHeitht
   		// 到底了
   		if(total == scrollHeight){
   			// 回到顶部
   			scrollbarEl.scrollTo({
   				top: 0,
   				behavior: 'smooth'
   			})
   		}else {
   			// 回到底部
   			scrollbarEl.scrollTo({
   				top: scrollHeight,
   				behavior: 'smooth'
   			})
   		} 
   	}
   },