点击返回顶部

首先我们要获取页面的dom元素

• 可以通过 ref 获取
• 给大盒子 绑定ref 属性

 ref="home"
 //获取整个盒子
 this.$refs.home

<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>

//挂载后 dom渲染完毕页面和内存的数据已经同步
 mounted() {
 	
    console.log(this.$refs.home);
    // addEventListener() 方法用于向指定元素添加事件。
    this.$refs.home.addEventListener('scroll',this.handlerscroll)
  },
  //销毁后
  destroyed(){
  // removeEventListener() 方法来移除 addEventListener() 方法添加的事件。
    this.$refs.home.removeEventListener('scroll',this.handlerscroll)
  },
  methods:{
    handlerscroll() {
      console.log(Math.ceil(this.$refs.home.scrollTop));
      // Math.ceil向上取整
      if(Math.ceil(this.$refs.home.scrollTop) >= 100) {
      	// 显示按钮
        this.huiShow = true
      } else {
      // 显示按钮
        this.huiShow = false
      }
    },
    huiTop() {
      this.$refs.home.scroll({
        top:0,
         //smooth缓慢返回到顶部
        behavior:'smooth'
      })
    }
  }