Membuat Tombol Back to Top dengan Efek Bounce

Sebenarnya sudah banyak tutorial untuk membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini ihwal bagaimana cara menciptakan tombol back to top dengan imbas bounce.

Sebelum melangkah pada tutorial, aku mengucapkan terimakasih kepada pengunjung blog ini, alasannya dengan banyak sekali pertanyaan memunculkan pandangan gres untuk menciptakan artike baru.

Lanjut kepada tutorial... Apa bahwasanya efek bounce itu? bounce artinya memantul, jadi back to top sesudah discroll akan ada sedikit imbas pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :

Langkah 1 : Simpan instruksi 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 teman sudah ada. Versi dapat berbeda-beda menyerupai 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : Simpan instruksi 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 gres HTML/JavaScript, simpan instruksi 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/AVvXsEj0VgebXWOVYQplHzUXDqsuAu3Damtm8qs28Hyo5RRMri8Sf_rZc2YrreLav-mZdP-MXo878DnXfUNuobkWWp2RQ5SHPkhjcD2x4uEaiQbX7Duge7TfCh82wHrvf_TNJmjnh-V5PmwZi7AR/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan instruksi di atas memakai fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah menyerupai blog ini, ganti instruksi pada langkah 2 dengan instruksi 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...

Apabila teman ingin tombol scroll back to top tanpa imbas bounce, kunjungi tutorianya DISINI
source :

Tweet

Subscribe to receive free email updates: