xref: /openbmc/webui-vue/src/components/Global/ButtonBackToTop.vue (revision 24b377db47a05f742b1f3db77606f6bae845f637) 
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.btn-top {
51  position: fixed;
52  bottom: 24px;
53  right: 24px;
54
55  box-shadow: $box-shadow;
56  visibility: hidden;
57  opacity: 0;
58  transition: $transition-base;
59  z-index: $zindex-fixed;
60
61  @media (min-width: 1600px) {
62    left: 1485px;
63    right: auto;
64  }
65}
66.show-btn {
67  visibility: visible;
68  opacity: 1;
69}
70</style>
71