Membuat Tombol Back to Top dengan Efek Bounce by zulfansy

9:18 AM zulfansyah 0 Comments

Back to Top Bounce effect
Sebenarnya sudah banyak tutorial untuk 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/AVvXsEisfTDiJYWAeaoXIdtQtslAqGzHwEBxVEcfdKkUfhNb83zXlc0pMeATCezVCtM5Ui3Dgt8vyafNBwkSfjCLaWdrZonSIsIM1q-p6zCmYHqsyo5-YwF9eVb-hqRODQ7eu23DsN8TRUp25Jpx/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...

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

0 comments:

Jual Akun COC AMAN TH 11 by zulfansy

9:19 AM zulfansyah 0 Comments

BANTU Teman Lagi Jual AKUN Coc TH 11

SOLD Ya!!!!!!!! 


Jual Akun COC AMAN TH 11





Jual Akun COC AMAN TH 11




Jual Akun COC AMAN TH 11



BANTU Teman Lagi Jual AKUN Coc TH 11

Builder sudah ada 5, WALL Sebagian sudah Level 10, Minus sudah pakai CN nya.

Minat langsung aja sms di no saya 0823 9622 2281
Akun di jamin AMAN 100%
 

Nanti Di bukakan CLAN nya jika ada yang mau lihat.
Nama CLAN nya Makassar MKS


Dan yang berminat beli CLAN COC LEVEL 5 Buat ngumpul-ngumpul bareng teman untuk WAR di COC sambil ngopi, he.., bisa lihat di sini :
Jual Clan COC Level 5


Info : Dan buat teman-teman setia fajriandaviar.blogspot.co.id ataupun pengunjung baru yang ingin di Postikan, di buatkan artikel IKLAN untuk mempromosikan sesuatu ( Asalkan Halal Yaa..! ), Silahkan Hubungi no HP saya di 0823 9622 2281, Biaya ongkos capek atau kuota bisa di bicarakan, he..,

SALAM.

0 comments: