<template>
<v-fab-transition>
<v-btn
v-show="buttonActive"
color="primary"
fab
dark
small
absolute
right
style="bottom: 20px; position: fixed"
@click="$vuetify.goTo(0)"
>
<v-icon>mdi-chevron-up</v-icon>
</v-btn>
</v-fab-transition>
</template>
<script>
export default {
data() {
return {
buttonActive: false,
scroll: 0,
}
},
mounted() {
window.addEventListener('scroll', this.scrollWindow) // スクロールの位置を監視
},
methods: {
scrollWindow() {
const top = 200
this.scroll = window.scrollY
if (top <= this.scroll) {
// 200px以上スクロールした場合のみボタンを表示
this.buttonActive = true
} else {
this.buttonActive = false
}
},
},
}
</script>
このファイルをcomponents/に保存して、使いたいところでコンポーネント名を書くだけでOK。