Cara Membuat Back To Top dengan Effect Bounce

Siang Sobat A-T,,pada kesempatan kali ini saya mau membahas tentang Cara Membuat Back To Top dengan Effect Bounce.

Mungkin sobat semua udah gk heran dengan Judul Blog Ini.

Ok langsung aja kita bahas satu per satu !!!

1. Cari kode ]]></b:skin> lalu letakan kode ini di atas kode tadi

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

2. Cari kode </head> dan letakkan script di bawah ini di atas kode </head>

<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() &gt; 100) { $(&#39;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });
    $(&#39;#toTop &gt; img&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

3. Simpan Template

4. dan pergi ke edit laman ambil tambah gadget dan ambil HTML/JAVASCRIPT lalu letakk kan kode di bawah ini

<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://i1169.photobucket.com/albums/r502/randyavolution/Untitled-1-1.png' style='margin-right:-9px'/></div>

Kode merah ganti dengan URL gambar kamu

Sekian Trima Kasih :v

Artikel Terkait

Cara Membuat Back To Top dengan Effect Bounce

4/ 5

Oleh Randi Afrinal

Randi Afrinal 8/10/2012 9 Komentar