From 8047ae3d83ba0718fb7a42907036157e5c680b85 Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:59:32 +0300
Subject: IBS: _sila UI theme

---
 src/components/_sila/Global/ButtonBackToTop.vue | 68 +++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/_sila/Global/ButtonBackToTop.vue

(limited to 'src/components/_sila/Global/ButtonBackToTop.vue')

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>
-- 
cgit v1.2.3

