Memasang Tombol back to top dengan effect Smooth dan Bounce (Jquery)

Oke Lanjutan dari post sebelumnya mengenai tombol back to top, kali ini ane modifikasi tombolnya agar bisa beranimasi dan bergerak dengan lembut. Jika hanya menggunakan css effect ini tidak bisa dilakukan jadi solusinya harus menggunakan Javascript atau Jquery lebih tepatnya  Demonya bisa dilihat di blog ini :D ya.

     Dalam postingan sebelumnya tepatnya pada postingan " Memasang Tombol Back to Top dengan Css " saya sudah menjelaskan cara memasang tombol back to top dengan css hanyasaja ada beberapa kekurangan, salahsatunya pergerakan atau animasi. Oleh karena itu pada postingan kali ini saya akan membuat tombol back to top yang dilengkapi dengan effect animasi bounce atau smooth.

Langsung saja ikuti cara berikut ini:

1. Login ke akun blog kamu pilih Layout
2. Masuk ke Template
3. Edit HTML
4. Salin kode berikut ini lalu simpan diatas kode </head>

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

5. Letakan script berikut ini sebelum tag </body>, untuk menggunakan effect bounce pada tombol kembali ke atas / back to top

<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>
<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/AVvXsEhrzPujvx53XJBHHk0gjV4OKZpNDfGKMrYHDdWAjJx08o4QWs1kpGSuvgHD9TC7T3a_UGwqUdo2vaZ9iEkzrfUr8W82mKj8iuRabZoFMnUSiNRvOpEZPqddcjiPMfJUKxUBu8aU_u6MBe8A/s1600/arrow-up_basic_blue.png'/></div> 

Klik simpan dan lihat hasilnya

   Jika kamu ingin merubah gambarnya silahkan ubah kode yang berwarna merah dengan link gambar yang kamu inginkan.

Dan jika kamu ingin menggunakan Efect smooth silahkan ganti script nomer lima dengan script berikut ini:

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>
<style type='text/css' scoped='scoped'>
#ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzPujvx53XJBHHk0gjV4OKZpNDfGKMrYHDdWAjJx08o4QWs1kpGSuvgHD9TC7T3a_UGwqUdo2vaZ9iEkzrfUr8W82mKj8iuRabZoFMnUSiNRvOpEZPqddcjiPMfJUKxUBu8aU_u6MBe8A/s1600/arrow-up_basic_blue.png'/></div> 

       Selesai juga post kali ini :D, Proteksi blogkamu dengan menonaktifkan fungsi seleksi, selengkapnya bisa dibaca disini