Sedikit Info Seputar
Membuat Tombol Back to Top dengan Efek Bounce
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Tombol Back to Top dengan Efek Bounce, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel jQuery,
Artikel Widget, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Membuat Tombol Back to Top dengan Efek Bounce
Terbaru
link: Membuat Tombol Back to Top dengan Efek Bounce
Berbagi Membuat Tombol Back to Top dengan Efek Bounce Terbaru dan Terlengkap 2017
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'/>
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/AVvXsEg09dh09kE1hUvfF3QHLz2hJ6-0BQBVDZDMxl81mQD_WaBRHw1MZZ93gdtNVPt8Qyi1zCCO0JECvqqm-iCpYjS1DNoVVh31SfP36_qgWAgulucme9-H9_oqNVjxyHjek3sN-OVuKEiYG6kC/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'>Semoga bermanfaat...
$(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>
Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI
source : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html