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