Membuat Back To Top dengan Efek Bounce

Posted by : AffrianKunz Minggu, 08 Juli 2012

Admin dapet ilmu baru nih :D
Admin mw share Cara membuat back to top dengan efect bounce XD
Simak yah . .

Tutorial :

Login blog

Pilih template
Terus ke edit HTML

Cari kode ]]></b:skin> (biar lebih cepat gunakan CTRL+F)

Copy kode dibawah :

#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}

pastekan diatas kode ]]></b:skin>

Lalu cari kode </head>, copy kode dibawah:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } });
$('#toTop > img').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>

Paste diatas kode </head>

Simpan/Save Template .

Trus pilih "tata letak", tambahkan gadget HTML/Javascript, copy paste kode dibawah:

<div id='toTop'><img src='http://i1160.photobucket.com/albums/q482/affrian007/Up.png' style='margin-right:-9px'/></div>

Tulisan warna Ijo ubah dengan url gambar kalian :D

Yang udah baca jangan lupa komennya, sekalian follow blog ini :)