Membuat Tombol Back To Top Dengan Efek Bounce - Hello sobat blogger yah jumpa lagi di blog KarcakZone, Dan saya akan share tentang cara Membuat Tombol Back To Top Dengan Efek Bounce Yah seperti sobat tahu Tombol Back To Top itu fungsinya apa? yah fungsinya adalah untuk mempercepat scroll back to top/ kembali ke atas.jadi
 |
| Membuat Tombol Back To Top Dengan Efek Bounce |
sobat hanya tinggal klik tombol aja jika ingin kembali ke atas :)
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 :
- dasbor > Tata letak > Tambah gadget > pilih menu HTML/JavaScript.
<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/AVvXsEhU0gcdkKjurUdFGWCJW0M3gVDoA-L94GuwK17EBBGcWraD7IQcVAADeCEm0zMKMNQwLl3xKueBNM47YfPCI-c1AdF9j8QOvt2ibMv1KvKt1dXNledfrrl9q1dCOKUg9Sz8RygUamYXmU3H/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>
Klik "Simpan Template" Semoga bermanfaat.. :]
Title : Membuat Tombol Back To Top Dengan Efek Bounce
Description : Membuat Tombol Back To Top Dengan Efek Bounce - Hello sobat blogger yah jumpa lagi di blog KarcakZone, Dan saya akan share tentang cara...
