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
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
new file mode 100644
index 0000000..9608c4a
--- /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>