<template>
 <div class="home">
  <div v-for="ys in 100" :key="ys">
   <p>1</p>
  </div>
  <div @click="back" class="back1" v-show="isShow">▲</div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   isShow: true
  };
 },

 handleScroll() {// handleScroll 和 methods 是同級(jí)
   if (window.pageYOffset > 300) {
    //window.pageYOffset:獲取滾動(dòng)距離
    this.isShow = true;
   } else {
    this.isShow = false;
   }
   // console.log(window.pageYOffset);
  },

 methods: {
  //點(diǎn)擊事件：
  back() {
   //返回頂部 $這個(gè)地方需要引入在線jq
   //<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   $("html")
    .stop()
    .animate(
     //animate：動(dòng)畫(huà) 點(diǎn)擊時(shí)讓它行動(dòng)
     {
      scrollTop: 0 //距離頂部為0
     },
     1000 //多少時(shí)間完成行動(dòng)
    );
  }
 }
};
</script>

<style scoped>
.back1 {
 width: 50px;
 height: 50px;
 background: #eee;
 position: fixed;
 right: 5px;
 bottom: 50px;
 z-index: 1000;
 text-align: center;
 line-height: 50px;
}
</style>

<template>
 <div class="scrollTop">
  <div class="backTop"
      @click="backTop">
    <button v-show="flag_scroll">
          返回頂部
    </button>
   </div>
   //數(shù)據(jù)源
   <div></div>
  </div>
</template>  
<script>
export default {
 name: 'scrollTop',
 data() {
  return {
 
   flag_scroll: false,
   scroll: 0,
  }
 },
 computed: {},
 methods: {
 //返回頂部事件
  backTop() {
   document.getElementsByClassName('scrollTop')[0].scrollTop = 0
  },
  //滑動(dòng)超過(guò)200時(shí)顯示按鈕
  handleScroll() {
   let scrollTop = document.getElementsByClassName('scrollTop')[0]
    .scrollTop
    console.log(scrollTop)
   if (scrollTop > 200) {
    this.flag_scroll = true
   } else {
    this.flag_scroll = false
   }
  },
 },
 mounted() {
  window.addEventListener('scroll', this.handleScroll, true)
 },
 created() { },
}
</script>

<style scoped>
.scrollTop{
 width: 100%;
 height: 100vh;
 overflow-y: scroll;
}
.backTop {
 position: fixed;
 bottom: 50px;
 z-index: 100;
 right: 0;
 background: white;
}
</style>