[Vue] 페이지 최상단 이동 버튼 만들기

스크롤을 내렸을때 페이지의 최상단으로 이동할 수 있는 버튼 구현

 

구현 예시

 

Code

<v-fab-transition>
    <v-btn
      bottom
      right
      fixed
      fab
      dark
      small
      v-show="btnShow"
      @click="$vuetify.goTo('#header')"
    >
      <v-icon>fas fa-angle-double-up</v-icon>
    </v-btn>
</v-fab-transition>

 

<script>
...

methods: {
    handleScroll() {
      this.btnShow = window.scrollY > 400;
    }
  },

  beforeMount() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }

</script>