クリックしたら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の機能のみでページへ戻るボタンが作れます。

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