DIY scroll to top widget for vue.js use

ReadMe.md

Scroll Top

A vue.js component to provide "scroll to top" of page functionality. Uses font awesome svg loader for the button/icon.

Issue

Currently there's an issue with this implmementation, in that mobile Safari tap events aren't triggering the click event as the desktop does.

This approach for its current project has been currently held in favor of vue-scroll-up

ScrollTop.vue

<template>
  <div>
    <a v-bind:class="{ active: isActive }" class="scroll-up"
        v-on:click="handleClick" onclick="console.log('clicked');window.scrollTo(0,0);">
      <font-awesome class="fas fa-4x" :icon="['fas', 'angle-double-up']" />
    </a>
  </div>
</template>

<script>
export default {
  mounted: function() {
    this.$nextTick(function () {
      this.scrollEventListener = window.addEventListener('scroll', this.handleScroll);
    })
  },
  beforeDestroy: function() {
    window.removeEventListener('scroll',this.scrollEventListener);
  },
  data() {
    return {
      isActive: false,
      scrollEventListener: undefined
    }
  },
  methods: {
    handleScroll: function (evt, el) {
      if (window.scrollY > 50) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
    },
    handleClick: function() {
      setTimeout(() => {
        console.log('clicked');
        this.isActive = false;
        window.scrollTo(0,0);
      }, 100);
    }
  }
}
</script>

<style scoped>
.scroll-up {
  padding: 1em;
  position: fixed;
  right: 0;
  top: 85vh;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s ease-in-out;
}
.scroll-up.active {
  visibility: visible;
  opacity: 1;
}
</style>