Cara Membuat Tombol Back To Top / Kembali Ke Atas Dengan Efek Bounce / Memantul

Mungkin kalian pernah melihat back to top di blog-blog tetangga,tetapi back to top ini lebih keren karena dilengkapi dengan efek bounce (memantul) jadi pengunjung bisa melihat sesuatu hal yang berbeda diblog anda dan jika anda ingin melihat demonya tidak usah jauh-jauh,karena di blog ini juga ada dan jika anda tertarik untuk memasang silakan ikuti cara-cara dari saya:

Langkah pertama pasang jqueri dulu [simpan diatas kode  </head> ]: 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'/>

Nb:lewati langkah ini jika template blog sobat sudah terpasang jquery.Versi jquery bisa berbeda 1.3.2, 1.6.4, 1.7.1,dan seterusnya...

Langkah kedua simpan kode dibawah ini tepat diatas kode </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 ketiga buat widget baru pilih HTML/Javascript lalu simpan kode dibawah 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/AVvXsEjm5KBuLbpf5ZJdKLrzkC0X46Yg6462_AGLr_cd9cb4Wkv36IjJ-0-jqCNmAT-Jp-PGqb1iy0g3sfMVtBdpIOrqw2O9QLPlru3hJwgSFEJ5-ES-FGF4sERcSQPBjifKUpE4gipVncXckMcW/s1600/arrow-up_basic_blue.png'/></div>

Untuk mengganti gambar bisa diganti tulisan yang bewarna merah.
Lalu Save