Vue中实现返回顶部

html样式

	//van-icon 是引用了vant组件中的icon图标
   <div class="top" v-show="flag_scroll" @click="backTop">
      <van-icon name="arrow-up" size="25" color="#333" />
      <p>顶部</p>
    </div>

data

 data() {
    return {
    	flag_scroll: false,
        scroll: 0,
    }
  },

methods

methods: {
	 //返回顶部

    backTop() {
      document.documentElement.scrollTop = 0;
    },

    //滑动超过200时显示按钮
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop;
      //console.log(document.documentElement.scrollTop);
      if (scrollTop > 200) {
        this.flag_scroll = true;
      } else {
        this.flag_scroll = false;
      }
    },
},

mounted

 mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },