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