Back To Top Dengan Efek Bounce

Mbah Siyam - Sebelumnya saya sudah jelaskan bagaimana cara membuat back to top dengan efek smooth. Nah kali ini post pertama di tahun 2014 adalah membuat back to top dengan efek bounce. Artinya kalau scroll back to top nya di fungsikan dan jika mencapai puncak elemen maka akan terlihat efek memantul atau bisa disebut bounce.

Membuat Back To Top Efek Dengan Bounce

1. Cari ]]></b:skin> lalu letakkan  kode ini di atasnya\

#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>

Lalu klik simpan

3.  Simpan kode ini di Tata Letak -> Add Gatged -> HTML/Javascript

<div id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlZvqRqvj5EWAiz67H4CVIZZr4qI_PHd8uE5MKOu5sI9pjhAG5xC9y7mxnaXzPNsMQLG1a57emtqqyqW44E_ZKGYdIhXHAXt5231qhk3yp7aPgmGiiOkC0dq3hx4M_X1sziFq9-U0mIo4/s1600/Back+To+Top.png' style='margin-right:-9px'/></div>

 Ganti url gambar dengan url gambar mu. Klik simpan dan Selesai