summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackToTopButton.vue
blob: 8067f2f91a9b8e91afbe73b9e8b36e295ebebb92 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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;
  z-index: 4;
}
</style>