Add back to top button to hardware status page

- Created global back to top button

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I32022613e1ba62667b46150463c8f407b0b4ff11

1 files changed, 64 insertions, 0 deletions

diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
new file mode 100644
index 00000000..9608c4a2
--- /dev/null
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -0,0 +1,64 @@
+<template>
+  <b-button
+    id="scrollToTopBtn"
+    class="btn-top btn-icon-only"
+    :class="{ showBtn: showButton }"
+    variant="secondary"
+    :title="$t('global.ariaLabel.scrollToTop')"
+    :aria-label="$t('global.ariaLabel.scrollToTop')"
+    @click="scrollToTop"
+  >
+    <icon-up-to-top />
+  </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;
+  z-index: $zindex-fixed;
+  box-shadow: $box-shadow;
+  opacity: 0;
+  transition: $transition-base;
+  @media (min-width: 1600px) {
+    left: 1485px;
+    right: auto;
+  }
+}
+.showBtn {
+  opacity: 1;
+}
+</style>