/home/henzagold/site/components/ Current File: /home/henzagold/site/components/backToTop.vue
<template>
  <div class="acr-arrows primary-arrows goTop" v-if="isVisible" @click="backToTop">
    <i class="slider-prev slick-arrow" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"/>
      </svg>
    </i>
  </div>
</template>

<script>
    export default {
      name: "backToTop",
      data(){
        return{
          isVisible: false
        }
      },
      methods:{
        initToTopButton() {
          $(document).bind('scroll', function() {
            let bottom = $('.footer-middle').offset().top + $('.footer-middle').outerHeight(true);
            let endPage = $(window).scrollTop() + $(window).innerHeight();
            var backToTopButton = $('.goTop');
            if(bottom <= endPage){
              backToTopButton.css({'position':'absolute'})
            }
            else {
              backToTopButton.css({'position':'fixed','bottom':'5px'})
            }
            if ($(document).scrollTop() > 250) {
              backToTopButton.addClass('isVisible');
              this.isVisible = true;
            } else {
              backToTopButton.removeClass('isVisible');
              this.isVisible = false;
            }
          }.bind(this));
        },
        backToTop() {
          $('html,body').stop().animate({
            scrollTop: 0
          }, 'slow', 'swing');
        }
      },
      mounted: function() {
        this.$nextTick(function() {
          this.initToTopButton();
        });
      }
    }
</script>

<style scoped>
  .goTop{
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 99998;
  }
  .goTop i {
    width: 50px;
    height: 50px;
  }
  @media (max-width: 768px) {
    .goTop i {
      width: 40px !important;
      height: 40px !important;
    }
  }
</style>