<template>
  <button type="button" id="goTop" @click="scrollToTop" class="btn btn-secondary shadow ui--float-position ui--btn-float" :style="{ display: btnShow }">
    <i class="bi bi-arrow-up"></i>
  </button>
</template>

<script>
import debounce from 'lodash/debounce';

export default {
  name: 'ScrollToTop',
  data() {
    return {
      btnShow: '',
    };
  },
  mounted() {
    document.addEventListener(
      'scroll',
      debounce(() => {
        this.btnShow = window.scrollY > 0 ? 'block' : 'none';
      }, 50),
    );
  },
  methods: {
    scrollToTop() {
      try {
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
      } catch {
        window.scrollTo(0, 0);
      }
    },
  },
};
</script>
