Membuat Tombol Back to Top dengan Efek bounce

Selamat datang trimakasih sudah berkunjung, di sini ane mau bagiin tutorial cara membuat tombul back to top pada blog sebelum nya apa itu tombol back to top?.

Back to top atau kembali keatas akan otomatis muncul pada halaman yang kita scrol ke bawah. biasa nya terdapat pada sudut kana bawah blog, Back to top hanyalah sebuah fitur tambahan yang mana akan mempermudah bagi para pengunjung blog yang membaca sebuah artikel yang cukup panjang kebawah lalu ia ingin kembali ke atas tanpa harus meng'scrol tetapi cukup dengan sekali klik yaitu dengan meng'klik tombol Back to top langsung kembali ke atas.

Yang ingin mencobanya bisa ikuti tutorial di bawah ini..

Langkah 1 : Simpan kode jQuery di atas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : Simpan kode ini masih di atas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Langkah 3 : Buat widget baru HTML/JavaScript, simpan kode ini :

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ch5DTjKTE9yi2M_HNozR-vFtwduHX5bhreZ_waRypOIXcNHimE2Em_oWXs1RziPZo6bnQdg5xxpAckkyrinE1WXDVjprfigivqi-lwI2aDH14gVCJNSnMhXAyJdiyUwMXr08LnuPMTh9/s1600/arrow-up_basic_blue.png'/></div>

Klik save