【Nuxt.js】vuetifyのスクロールイベントでトップへ戻るボタンを作る

vuetifyにはデフォルトでスクロールイベントを起こす機能があり、その機能を組み合わせることによりトップへ戻るボタンを作ることができます。

vue.jsでは「vue-go-top」というページ戻り専用のライブラリーはありますが、今回はvuetifyのみを利用して作成します。

クリックしたらTopに戻る

vuetifyには$vuetify.goTo()と指定するだけでスクロールイベントを起こすことができます。
[スクローリングディレクティブ]
(https://vuetifyjs.com/ja/directives/scrolling/)

<v-btn @click="$vuetify.goTo(target, options)"></v-btn>

こちらに０をいれると、クリックしたときに一番上まで戻ります。

<v-btn @click="$vuetify.goTo(0)"></v-btn>

scriptに記入する

$vuetify.goTo(0)を下記のようにscriptに記入することでtemplate側をすっきりできます。

<v-btn @click="toTop"></v-btn>

methods: {
  toTop () {
    this.$vuetify.goTo(0)
  }
}

スクロールしたら表示される

こちらはv-scrollを使用します。

スクロールで呼び出す関数をセットします。

<v-btn
  v-scroll="onScroll"
  @click="$vuetify.goTo(0)">
</v-btn>

※デフォルトはウィンドウですが、スクロールの変更を監視するターゲットは任意のIDセレクターに変更できます。

methodsに記入していく

onScroll関数に記入。
typeof window === 'undefined'はターゲットのデフォルトがwindowの場合使用。
window.pageYOffsetで垂直スクロール量を取得target.scrollTopも同様です。

methods: {
  onScroll (e){
    if (typeof window === 'undefined') return
    const top = window.pageYOffset ||   e.target.scrollTop || 0
  }
}

表示・非表示の設定

v-showで表示・非表示を切り替えます。
さきほどのスクロール値を取得してfabに格納。指定の値にきたら表示するようにします。

<v-btn
  v-scroll="onScroll"
  v-show="fab"
  @click="$vuetify.goTo(0)">
</v-btn>

data: () => {
  return {
    fab: false
  };
},
methods: {
  onScroll (e){
    if (typeof window === 'undefined') return
    const top = window.pageYOffset ||   e.target.scrollTop || 0
    this.fab = top > 500
  }
}

すべてまとめて表示する

さきほどの機能をまとめ、装飾やアニメーションを追加するとのようなソースになります。
少し動きも付けたかったのでtransitionを使ってみました。

<transition name="fade">
  <v-btn 
    v-scroll="onScroll"
    v-show="fab"
    fab
    dark
    fixed
    bottom
    right
    color="primary"
    @click="toTop">
    <v-icon>fas fa-angle-up</v-icon>
  </v-btn>
</transition>

<script>
export default {
  data: () => {
    return {
      fab: false
    };
  },
  methods: {
    onScroll (e){
      if (typeof window === 'undefined') return
      const top = window.pageYOffset ||   e.target.scrollTop || 0
      this.fab = top > 500
    },
    toTop () {
      this.$vuetify.goTo(0)
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: 0.5s;
} 
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: scale(0);
}
</style>

これで外部ライブラリを使わずvuetifyの機能のみでページへ戻るボタンが作れます。