Membuat Back To Top Dengan Efek Bounce

Membuat Back To Top Dengan Efek Bounce - Sudah banyak tutorial untuk membuat back to top, mungkin back to top kali ini berbeda dengan yang sering sobat temukan. apa back to top ? sesuai dari namanya, back to top yaitApa efek bounce itu ? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan, twewewewew :D. dengan adanya back to top memudahkan pengunjung untuk melihat ke atas halaman, baik di halaman homepage atau halaman posting. oh iya hampir lupa, script kali ini lagi2 saya ambil dari blog kangismet. berikut tutorialnya.

Membuat Back To Top Dengan Efek Bounce :

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').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#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/AVvXsEiAQEB0dXISetuRJaazXgBa77TAeQfOMBiLHCA3a4uoBgPDlgES-wA8IsfFuNDM5hGNZlr5AwI7nwtVwJhVmslzwaPuiqiUH5uD4ZwXrlp2Dfp4RRGH81fb93rzTJ_IXmMUrT70bPPgiGeF/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada langkah 2 dengan kode ini :

<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>

Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI.

simpan template dan semoga berhasil :D