Membuat Button Back To Top Dengan Animasi jQuery

apakah anda pernah melihat arah panah keatas ketika sebuah website atau blog yang anda kunjungi anda scroll sampai ke bawah tapi ketika blog atau website yang anda kunjungi anda scroll ke atas dan sampai batas header arah panah atas website atau blog tersebut akan menghilang tapi jika anda scroll lagi ke bawah arah panah tersebut akan kembali muncul, biasanya arah panah atas tersebut berada di pojok bawah kanan, fungsi dari back to top biasanya agar memudahkan user agar tidak perlu repot repot menscroll mouse sampai ber kali kali,  karena dengan satu klik button panah atas maka website atau browser akan secara otomatis kembali ke atas
ok kita kembali ke pembahasan, kali ini saya akan share cara membuat button back to top dengan bantuan animasi dari jQuery, untuk membuat animasi dengan jQuery kita membutuhkan plugin dari jQuery anda bisa mendownload ya disini atau bisa juga menyalin kode berikut dan di pasangkan sebelum tag </head> pada website atau blog anda

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Langkah selanjutnya yaitu membuat css silahkan salin kode berikut.
kode css berikut akan menempatkan button back to top berada pojok kanan bawah

<style type="text/css">
.back-to-top { background-color: #F7941D; cursor: pointer; color: #FFFFFF; border:2px solid #1497EC; position: fixed; right: 15px; bottom: 25px; display: inline-block; padding: 10px 15px; border-radius: 50% !important; }
</style>

Kemudian selanjutnya yaitu membuat script dari javascript silahkan salin kode berikut.
kode ini yang akan membuat animasi ketika button back to top kita klik

<script type="text/javascript">
  $('.back-to-top').hide();
  $(window).on('scroll', function(e){
    $this = $(this);
    if($this.scrollTop() > 0){
      $('.back-to-top').fadeIn('slow');
    }else{
      $('.back-to-top').fadeOut('fast');
    }
  });

  $('.back-to-top').on('click', function(){
    $('body,html').animate({scrollTop: 0}, 1000);
  });
</script>

Dan yang terakhir membuat tag div sebelum tag </body> silahkan salin kode berikut

<div class="back-to-top">
<i class="fa fa-angle-double-up fa-2x"/>
</div>

Keterangan :
- <i class="fa fa-angle-double-up fa-2x"/>
adalah icon dari fontawasome, agar icon panah atas bisa muncul anda harus memasang plugin css dari fontawasome, silahkan salin kode berikut, dan letakan sebelum tag </head>

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>

Jika icon kurang sesuai anda bisa merubahnya sendiri, silahkan klik disini untuk melihat icon dari fontawasome
Ok. sampau disini dulu turorial kali ini, selamat mencoba dan semoga mermanfaat.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.