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