<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <v-scale-transition>
    <v-btn
      class="back-to-top-button"
      fab
      color="primary"
      v-show="visible"
      v-scroll="handleScroll"
      @click="$vuetify.goTo(0, { duration })"
    >
      <v-icon>keyboard_arrow_up</v-icon>
    </v-btn>
  </v-scale-transition>
</template>

<script>

export default {
  name: 'BackToTopButton',
  data () {
    return {
      visible: false
    }
  },
  computed: {
    duration () {
      return this.$store.state.settings.noAnimations ? 0 : 420
    }
  },
  methods: {
    handleScroll () {
      const offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      if (offset > 200) this.visible = true
      else this.visible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.back-to-top-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
}
</style>
