diff options
author | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:59:32 +0300 |
---|---|---|
committer | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:59:32 +0300 |
commit | 8047ae3d83ba0718fb7a42907036157e5c680b85 (patch) | |
tree | 600b017fe3a75ab4d1577eb9367afe8548401f9f /src/components/_sila/Global/ButtonBackToTop.vue | |
parent | 3f4094d08b873e17464a51c817ea7d41177f848d (diff) | |
download | webui-vue-8047ae3d83ba0718fb7a42907036157e5c680b85.tar.xz |
IBS: _sila UI theme
Diffstat (limited to 'src/components/_sila/Global/ButtonBackToTop.vue')
-rw-r--r-- | src/components/_sila/Global/ButtonBackToTop.vue | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/src/components/_sila/Global/ButtonBackToTop.vue b/src/components/_sila/Global/ButtonBackToTop.vue new file mode 100644 index 00000000..9160c7b7 --- /dev/null +++ b/src/components/_sila/Global/ButtonBackToTop.vue @@ -0,0 +1,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> |