1<template>
2  <b-button
3    id="scrollToTopBtn"
4    class="btn-top btn-icon-only"
5    :class="{ 'show-btn': showButton }"
6    variant="secondary"
7    :title="$t('global.ariaLabel.scrollToTop')"
8    :aria-label="$t('global.ariaLabel.scrollToTop')"
9    @click="scrollToTop"
10  >
11    <icon-up-to-top />
12  </b-button>
13</template>
14
15<script>
16import UpToTop24 from '@carbon/icons-vue/es/up-to-top/24';
17
18import { debounce } from 'lodash';
19
20export default {
21  name: 'BackToTop',
22  components: { IconUpToTop: UpToTop24 },
23  data() {
24    return {
25      showButton: false,
26    };
27  },
28  created() {
29    window.addEventListener('scroll', debounce(this.handleScroll, 200));
30  },
31  methods: {
32    handleScroll() {
33      document.documentElement.scrollTop > 500
34        ? (this.showButton = true)
35        : (this.showButton = false);
36    },
37    scrollToTop() {
38      document.documentElement.scrollTo({
39        top: 0,
40        behavior: 'smooth',
41      });
42    },
43  },
44};
45</script>
46
47<style lang="scss" scoped>
48.btn-top {
49  position: fixed;
50  bottom: 24px;
51  right: 24px;
52
53  box-shadow: $box-shadow;
54  visibility: hidden;
55  opacity: 0;
56  transition: $transition-base;
57  z-index: $zindex-fixed;
58
59  @media (min-width: 1600px) {
60    left: 1485px;
61    right: auto;
62  }
63}
64.show-btn {
65  visibility: visible;
66  opacity: 1;
67}
68</style>
69