<template>
  <!-- Back to top -->
  <a
    href="#"
    @click="topFunction"
    class="back-to-top-btn btn btn-gradient-primary"
    id="back-to-top"
    ><i class="mdi mdi-chevron-up"></i
  ></a>
</template>

<script lang="ts">
export default {
  setup() {
    window.onscroll = function () {
      scrollFunction();
    };

    function scrollFunction() {
      let mybutton = document.getElementById("back-to-top");
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) {
        if(mybutton) mybutton.style.display = "block";
      } else {
        if(mybutton) mybutton.style.display = "none";
      }
    }

    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }

    return {
      topFunction,
    };
  },
};
</script>
