Cara Mudah Membuat Tombol Back To Top Dengan Efek Bounce Ala Kang Ismet

 Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya:

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>

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

http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: