Membuat Tombol Back To Top Dengan Efek Bounce

Baca Juga

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

Sebelum melangkah pada tutorial, aku mengucapkan terimakasih kepada pengunjung blog ini, alasannya dengan aneka macam pertanyaan memunculkan ilham untuk menciptakan artike baru.

Lanjut kepada tutorial... Apa bekerjsama 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 arahan 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 sahabat sudah ada. Versi dapat berbeda-beda menyerupai 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : Simpan arahan 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 arahan 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/AVvXsEhqCzt3Sc6bwFyBP8UE02fb2koTKFBO8Vc1HgUQaXK6ySl7NX-qH1eBXwPKQA7XuBv0fkknJUu0TGy-Z2gJiV5191nUcX_cyxyU_3JTKtOj6WAnown8JTzZilKxqvRW3sSN0I_sp0_-fVnz/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan arahan di atas memakai fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah menyerupai blog ini, ganti arahan pada langkah 2 dengan arahan 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 sahabat ingin tombol scroll back to top tanpa imbas bounce, kunjungi tutorianya DISINI
source : https://mamankdzgn.blogspot.com//search?q=