Sebenarnya sudah banyak tutorial untum
membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana
cara membuat tombol back to top dengan efek bounce.
Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada
pengunjung blog ini, karena dengan berbagai pertanyaan memunculkan ide
untuk membuat artike baru.
Lanjut kepada tutorial... 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>
<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/AVvXsEg7Vtqq854JZQhhWyeMjWGtuH8z7A_CDadRRYvPtDalDuXR7vckiwTbPqy0KRbpYSIks2ilGLUwonGORnSs8nWsVvBPKMPXeWk8amLjFbyku3xGAH7rZAzvbiywfpNkx64XX3dGhOuj9I0R/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>
Semoga bermanfaat....
sumber : KangIsmet
.png)
