解释ElementUI的回到顶部功能显示错误的问题

参考文章：vue中实现回到顶部功能
vue进入页面时不在顶部，检测滚动返回顶部按钮
文档：Element文档：Backtop 回到顶部

主要是解释这个报错问题，因为直接CtrlCV的话是不行的，具体实现代码可以看底部,中间是解释部分，可能有点小乱
可以在elementui文档里面F12看一下界面的结果
这里主要是用来引用你要进行滚动的那部分的class名称
如图

具体可以看文档的效果
https://element.eleme.cn/#/zh-CN/component/backtop
我自己代码：

效果：

不过做到这里之后你点击一下是没法回到顶部的，因为没加点击事件
点击事件我是引用了这里的：
vue中实现回到顶部功能

加完之后就可以点一下回到顶部啦。具体代码是这样的；
另外，加下面这个的原因就是为了隐藏边框出现的滚动条

overflow-x: auto;overflow-y: auto;

：

 <el-main style="position:relative;">
        <el-row :gutter="20" class="page-component__scroll" style="overflow:hidden;">
	          <el-col :span="16" :offset="4" class="el-scrollbar__wrap bg-white padding-top"
	           style="overflow-x: auto;overflow-y: auto;"></el-col>
 		</el-row>
		<div class="el-backtop" style="right: 40px;bottom: 40px;" @click="backTop">
		    <div class="el-icon-caret-top">
		      <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
		
		      </el-backtop>
		    </div>
		</div>
</el-main>
// 点击回到顶部方法，加计时器是为了过渡顺滑
	backTop () {
	    console.log("123")
	      const that = this
	      let timer = setInterval(() => {
	        let ispeed = Math.floor(-that.scrollTop / 5)
	        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
	        if (that.scrollTop === 0) {
	          clearInterval(timer)
	        }
	      }, 25)
	  },

然后发现会一直显示，可以加多一个函数，进行判断

<div v-if="btnFlag==true" class="el-backtop" style="right: 40px;bottom: 40px;" @click="backTop">
 	<div class="el-icon-caret-top">
    	<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"></el-backtop>
  	</div>
</div>
data(){
    return{
      btnFlag:false,
    }
  },
  method:{
  	// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
      scrollToTop () {
        const that = this
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.scrollTop = scrollTop
        if (that.scrollTop > 60) {
          that.btnFlag = true
        } else {
          that.btnFlag = false
        }
      },
  }

如果是一开始进入界面没有回到顶部的话，只需要在main.js那里加上这个：

router.afterEach((to, from) => {
  window.scrollTo(0,0);
})

具体可以看这个：vue进入页面时不在顶部，检测滚动返回顶部按钮