返回顶部组件的步骤

有两种写法一种是原生的还有一种可以用this.$refs.home

第一种：

1.首先需要写点击返回顶部的div

代码如下（示例）：

复制代码

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

2.页面载入时和页面销毁时的监听事件

复制代码

1
2
3
4
5
6
7
8
 mounted() {  //页面加载时添加监听事件
    this.ele = document.querySelector('.home') //获取节点
    this.ele.addEventListener('scroll',this.handlerscroll) //绑定监听事件
  },
  destroyed(){  //页面销毁时移出监听事件
    this.ele.removeEventListener('scroll',this.handlerscroll) //移出监听事件
  },

3.在mothods中写点击回到顶部和控制显示隐藏的事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 methods:{   
    handlerscroll() { //点击显示隐藏
    //Math.ceil取整数的意思
      if(Math.ceil(this.ele.scrollTop) >= 100) {  
        this.huiShow = true
      } else {
        this.huiShow = false 
      }
    },
    huiTop() { //点击回到顶部
      this.ele.scroll({	
        top:0, //距离顶部为0
        behavior:'smooth' //缓慢的回到最上边表示状态
      })
    }
    
  }