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