Refactor the "Back to Top" button component

resources/assets/js/components/main-wrapper/main-content/albums.vue

@@ -5,10 +5,10 @@
       <view-mode-switch :mode="viewMode" for="albums"/>
     </h1>
 
-    <div class="albums main-scroll-wrap" :class="'as-'+viewMode" @scroll="scrolling">
+    <div ref="scroller" class="albums main-scroll-wrap" :class="'as-'+viewMode" @scroll="scrolling">
       <album-item v-for="item in displayedItems" :album="item"/>
       <span class="item filler" v-for="n in 6"/>
-      <to-top-button :showing="showBackToTop"/>
+      <to-top-button/>
     </div>
   </section>
 </template>

resources/assets/js/components/main-wrapper/main-content/artists.vue

@@ -8,7 +8,7 @@
     <div class="artists main-scroll-wrap" :class="'as-'+viewMode" @scroll="scrolling">
       <artist-item v-for="item in displayedItems" :artist="item"/>
       <span class="item filler" v-for="n in 6"/>
-      <to-top-button :showing="showBackToTop"/>
+      <to-top-button/>
     </div>
   </section>
 </template>

resources/assets/js/components/main-wrapper/main-content/home.vue

@@ -68,7 +68,7 @@
         </div>
       </section>
 
-      <to-top-button :showing="showBackToTop"/>
+      <to-top-button/>
     </div>
   </section>
 </template>

resources/assets/js/components/shared/to-top-button.vue

@@ -1,15 +1,37 @@
 <template>
-  <div class="to-top-btn-wrapper" v-show="showing" transition="fade">
-    <button @click="$parent.scrollToTop()">
-      <i class="fa fa-arrow-circle-up"></i>
-      Top
-    </button>
-  </div>
+  <transition name="fade">
+    <div class="to-top-btn-wrapper" v-show="showing">
+      <button @click="scrollToTop">
+        <i class="fa fa-arrow-circle-up"/> Top
+      </button>
+    </div>
+  </transition>
 </template>
 
 <script>
+import { $ } from '../../utils'
+
 export default {
-  props: ['showing']
+  props: ['el'],
+  data () {
+    return {
+      showing: false
+    }
+  },
+
+  methods: {
+    scrollToTop () {
+      $.scrollTo(this.$el.parentNode, 0, 500, () => {
+        this.showing = false
+      })
+    }
+  },
+
+  mounted () {
+    this.$el.parentNode.addEventListener('scroll', e => {
+      this.showing = e.target.scrollTop > 64
+    })
+  }
 }
 </script>
 
@@ -27,11 +49,7 @@ export default {
   opacity: 1;
   transition: opacity .5s;
 
-  &.fade-enter {
-    opacity: 0;
-  }
-
-  &.fade-leave {
+  &.fade-enter, &.fade-leave-to {
     opacity: 0;
   }
 

resources/assets/js/mixins/infinite-scroll.js

@@ -1,4 +1,3 @@
-import { $ } from '../utils'
 import toTopButton from '../components/shared/to-top-button.vue'
 
 /**
@@ -12,8 +11,7 @@ export default {
   data () {
     return {
       numOfItems: 30, // Number of currently loaded and displayed items
-      perPage: 30,  // Number of items to be loaded per "page"
-      showBackToTop: false
+      perPage: 30  // Number of items to be loaded per "page"
     }
   },
 
@@ -24,8 +22,6 @@ export default {
       if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 32) {
         this.displayMore()
       }
-
-      this.showBackToTop = e.target.scrollTop > 64
     },
 
     /**
@@ -33,14 +29,6 @@ export default {
      */
     displayMore () {
       this.numOfItems += this.perPage
-    },
-
-    /**
-     * Scroll to top of the wrapper.
-     */
-    scrollToTop () {
-      $.scrollTo(this.$refs.wrapper, 0, 500)
-      this.showBackToTop = false
     }
   }
 }

resources/assets/js/utils/$.js

@@ -36,7 +36,7 @@ export const $ = {
     }
   },
 
-  scrollTo (el, to, duration) {
+  scrollTo (el, to, duration, cb = null) {
     if (duration <= 0 || !el) {
       return
     }
@@ -45,6 +45,7 @@ export const $ = {
     window.setTimeout(() => {
       el.scrollTop = el.scrollTop + perTick
       if (el.scrollTop === to) {
+        cb && cb()
         return
       }
       this.scrollTo(el, to, duration - 10)