Cara Membuat Button Back To Top Dengan VueJs

Button Back To Top sangat bermanfaat buat user atau pengguna jika saat terlalu banyak scroll sampai bawah halaman sebuah website. Button back to top memudahkan saat ingin kembali lagi ke awal atau ke atas bagian halaman website. Dalam kesempatan kali ini saya kita akan belajar membuat button back to top dengan VueJs.Bagaimana cara membuatnya? Yuk mari langsung kita buat saja mulai dari persiapan tentu buat sebuah file HTML untuk struktur awalnya seperti dibawah ini:

<template id="Up">
  <div>
    <transition name="back-to-top-fade">
      <div class="vue-back-to-top" :style="`bottom:${this.bottom};right:${this.right};`" v-show="visible" @click="up">
        <slot>
          <div class="default">
            <span>
              {{ text }}
            </span>
          </div>
        </slot>
      </div> 
    </transition>
  </div>
</template>

Code diatas digunakan sebagai template yang nanti memberika fungsi dari button, selanjutnya kita akan isi sebuah content yang digunakan.

<div id="app">
  <back-to-top text="UP"><i class="fas fa-chevron-circle-up"></i></back-to-top>
  <h1>Membuat Back to Top Dengan VueJs</h1>
	  Lorem ipsum dolor sit amet consectetur adipisicing elit............
<!-- Silahkan Isi Content bisa 1000 karakter -->
</div>

Pada bagian content sahabat silahkan isi yang banyak karakter supaya lebih lama scroll kebawahnya. Dan selanjutnya adalah untuk code dari script javascript yang berisi style posisi button serta perinta event button seperti dibawah ini:

<script>
	Vue.component('back-to-top', {
  template: '#Up',
  name: 'UP',
  props: {
    text: {
      type: String,
      default: 'text'
    },
    visibleoffset: {
      type: [String, Number],
      default: 400
    },
    right: {
      type: String,
      default: '30px',
    },
    bottom: {
      type: String,
      default: '40px',
    },
  },
  data () {
    return {
      visible: false
    }
  },
  mounted () {
    window.smoothscroll = () => {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
      if (currentScroll > 0) {
        window.requestAnimationFrame(window.smoothscroll)
        window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
      }
    }
    window.addEventListener('scroll', this.catchScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.catchScroll)
  },
  methods: {
    catchScroll () {
      this.visible = (window.pageYOffset > parseInt(this.visibleoffset))
    },
    
    up() {
      window.smoothscroll()
      this.$emit('scrolled');
    }
  }
}) 
new Vue({
  
}).$mount('#app')
</script>

Langkah selanjutnya tambahkan style dari css agar button yang dipakai terlihat menarik dari segi tampilan serta efek yang dimunculkan, sahabat bisa ketikkan code css berikut:

#app{  
  width: 800px;
  margin:auto;
  text-align: justify;
  font-size: 20px;
}

.back-to-top-fade-enter-active, .back-to-top-fade-leave-active {
  transition: opacity .5s;
}
.back-to-top-fade-enter, .back-to-top-fade-leave-to{
  opacity: 0;
}

.vue-back-to-top{
  position: fixed;
  z-index: 1;
  cursor:pointer;
}

.vue-back-to-top i{
  width: 50px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 35px;
  background-color: #09f02d;
  border-radius: 50%;
}

.vue-back-to-top .default span{
  color:#fff;
}

Baiklah jika sudah silahkan simpan lalu coba jalankan pada browser masing-masing, jika benar maka saat scroll halaman sampai kebawah maka akan muncul button icon arah keatas.

Saya kira cukup dalam pembahasan kali ini tentang Cara Membuat Button Back To Top Dengan VueJs. Semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.

terima kasih.