Vue.jsでtopへ戻る機能を実装

Vue.jsで実装した機能を備忘録として記録する。
※Vue-CLIを使用しています。

template

<div class="footer">
   <i class="icon-up-open-big scrollToTop" @click="scrollTop"></i>
</div>

js

export default {

  data() {
      return {
          scrollY: 0
      }
  },

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

  methods: {
    handleScroll() {
        this.scrollY = window.scrollY;
        let scrollToTop = document.getElementsByClassName("scrollToTop")[0];

        if(scrollY > 100) {
            scrollToTop.style.display = "inline";
        } else {
            scrollToTop.style.display = "none";
        }
    },

    scrollTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
  }
  }
}