I made a scroll to top and scroll to bottom button. My intention is to hide both of the buttons in pages that do not contain vertical scrollbar only. However, only scroll to top button disappear in pages that do not have vertical scrollbar. If the user clicks the scroll to top button, it will direct the user to the top of the page which in result, the scroll to top icon changes to scroll to bottom icon which allow user to go bottom of the page. So the issue arise around here, when it changes to scroll to bottom icon, the button will stay in every page including pages that do not have vertical scrollbar. For scroll-to-top button , it does not happen like that as it will disappear in pages that do not have vertical scrollbar but not for scroll to bottom button. This issue happens when scroll to bottom button shows up. Any idea on fixing this?

ScrollToTop.vue

<template>

      <div v-scroll="onScroll" >
        <v-btn v-if = "!isVisible"
            fab fixed bottom right color="primary" @click="toBottom">
            <v-icon>mdi-arrow-down-bold-box-outline</v-icon>
        </v-btn>

        <v-btn v-else
            fab fixed bottom right color="primary" @click="toTop">
            <v-icon>mdi-arrow-up-bold-box-outline</v-icon>
        </v-btn>
      </div>
</template>

<script>

export default{
,
    data () {
        return {
        isVisible: false,
        position: 0,


    }
  },
   methods: {
    onScroll () {
      this.isVisible = window.scrollY > 50
    },
    toTop () {
      this.position = window.scrollY
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    },
    toBottom(){

      let pos = this.position > 0 ? this.position : document.body.scrollHeight

      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      })
    },

  }
}

</script>

Default.vue

<script>

export default {
    name: "DefaultLayout",
    data() {
        return {

            hasScroll: false
        };
    },
    methods: {

        hasVerticalScroll() {
          this.hasScroll = document.body.offsetHeight > window.innerHeight;
    }
  }
}
</script>

<template>
  <v-app dark v-scroll="hasVerticalScroll">


     <ScrollToTop v-if="hasScroll"></ScrollToTop>

  </v-app>
</template>