Thursday, January 29, 2015

Cara Membuat Back to Top Button Bounce Effect

Oke kembali lagi Riyan Markotop :D kali ini saya akan membahas Cara Membuat Back to Top Button Bounce Effect.
Memang jaman sekarang memang sudah banyak cara untuk membuat back to top di blog bermacam - macam cara untuk membuatnya namun ada juga sudah banyak pertanyaan pengunjung blog tentang bagaimana Cara Membuat Back to Top Button Bounce Effect.

Masuk ke Taka tiki tutorialnya tapi tunggu dulu Apa sebenarnya efek Bounce itu? bounce artinya memantul, jadi back to top waktu discroll akan ada sedikit efek pantulan seperti Per pegas yang di tekan :D . untuk mempraktekkanya lanjut 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 anda sudah ada. banyak versi berbeda-beda seperti 1.7.1,1.6.4, 1.3.2 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/AVvXsEj-wbh-36LtJq07OxtlUib0VvPJFCIdzXesnFnrOeMDyQdmfIxBbm9_ZUlq56TiVkEphpxis501x8fjM4iw42cvkwDIAbtzcaAnGs1ZujYNTC7zC_K_KtlKWqyS8mDxmVyvyRjkRAopCgB8/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>