Menambahkan Tombol Back To Top Pada Blog

Tutorial atau cara Menambahkan Tombol Back To Top Pada Blog, baru saya terapkan pada blog saya. Kemudian saya berencana menulis ulang dan mempostingnya dengan bahasa yg baru. 

Walaupun tutorial ini sudah lumayan banyak atau sudah lazim oleh para bloggers, namun semoga tetap ada yg membaca postingan saya kali ini. Itung-itung nambah jumlah postingan.

Jenis tombolnya nantinya, seperti pada blog saya. Yaitu menggunakan efek bounce, dimana ketika header blog sampai ke titik paling atas maka akan bergetar, seperti lentingan bola atau balon.

Berikut langkah-langkahnya :

• Copy kode Jquery dibaha ini diatas </head>

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

• Simpan kode dibawah ini masih diatas </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>

• Buat Widget HTML/Java Script, lalu simpan kode dibawah ini :

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

Silahkan Support Situs Ini Jika Berkenaan ;)

Tweet