1970ea7d7SDixsie Wolmers<template> 2970ea7d7SDixsie Wolmers <b-button 3970ea7d7SDixsie Wolmers id="scrollToTopBtn" 4970ea7d7SDixsie Wolmers class="btn-top btn-icon-only" 586e11ad3SDerick Montague :class="{ 'show-btn': showButton }" 6970ea7d7SDixsie Wolmers variant="secondary" 7970ea7d7SDixsie Wolmers :title="$t('global.ariaLabel.scrollToTop')" 8970ea7d7SDixsie Wolmers @click="scrollToTop" 9970ea7d7SDixsie Wolmers > 10970ea7d7SDixsie Wolmers <icon-up-to-top /> 11*6e2cb978SSurenNeware <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span> 12970ea7d7SDixsie Wolmers </b-button> 13970ea7d7SDixsie Wolmers</template> 14970ea7d7SDixsie Wolmers 15970ea7d7SDixsie Wolmers<script> 16970ea7d7SDixsie Wolmersimport UpToTop24 from '@carbon/icons-vue/es/up-to-top/24'; 17970ea7d7SDixsie Wolmers 18970ea7d7SDixsie Wolmersimport { debounce } from 'lodash'; 19970ea7d7SDixsie Wolmers 20970ea7d7SDixsie Wolmersexport default { 21970ea7d7SDixsie Wolmers name: 'BackToTop', 22970ea7d7SDixsie Wolmers components: { IconUpToTop: UpToTop24 }, 23970ea7d7SDixsie Wolmers data() { 24970ea7d7SDixsie Wolmers return { 25970ea7d7SDixsie Wolmers showButton: false, 26970ea7d7SDixsie Wolmers }; 27970ea7d7SDixsie Wolmers }, 28970ea7d7SDixsie Wolmers created() { 29970ea7d7SDixsie Wolmers window.addEventListener('scroll', debounce(this.handleScroll, 200)); 30970ea7d7SDixsie Wolmers }, 31970ea7d7SDixsie Wolmers methods: { 32970ea7d7SDixsie Wolmers handleScroll() { 33970ea7d7SDixsie Wolmers document.documentElement.scrollTop > 500 34970ea7d7SDixsie Wolmers ? (this.showButton = true) 35970ea7d7SDixsie Wolmers : (this.showButton = false); 36970ea7d7SDixsie Wolmers }, 37970ea7d7SDixsie Wolmers scrollToTop() { 38970ea7d7SDixsie Wolmers document.documentElement.scrollTo({ 39970ea7d7SDixsie Wolmers top: 0, 40970ea7d7SDixsie Wolmers behavior: 'smooth', 41970ea7d7SDixsie Wolmers }); 42970ea7d7SDixsie Wolmers }, 43970ea7d7SDixsie Wolmers }, 44970ea7d7SDixsie Wolmers}; 45970ea7d7SDixsie Wolmers</script> 46970ea7d7SDixsie Wolmers 47970ea7d7SDixsie Wolmers<style lang="scss" scoped> 48970ea7d7SDixsie Wolmers.btn-top { 49970ea7d7SDixsie Wolmers position: fixed; 50970ea7d7SDixsie Wolmers bottom: 24px; 51970ea7d7SDixsie Wolmers right: 24px; 5286e11ad3SDerick Montague 53970ea7d7SDixsie Wolmers box-shadow: $box-shadow; 5486e11ad3SDerick Montague visibility: hidden; 55970ea7d7SDixsie Wolmers opacity: 0; 56970ea7d7SDixsie Wolmers transition: $transition-base; 5786e11ad3SDerick Montague z-index: $zindex-fixed; 5886e11ad3SDerick Montague 59970ea7d7SDixsie Wolmers @media (min-width: 1600px) { 60970ea7d7SDixsie Wolmers left: 1485px; 61970ea7d7SDixsie Wolmers right: auto; 62970ea7d7SDixsie Wolmers } 63970ea7d7SDixsie Wolmers} 6486e11ad3SDerick Montague.show-btn { 6586e11ad3SDerick Montague visibility: visible; 66970ea7d7SDixsie Wolmers opacity: 1; 67970ea7d7SDixsie Wolmers} 68970ea7d7SDixsie Wolmers</style> 69