Membuat Tombol Back To Top Goyang Dombret

Membuat Tombol Back To Top Goyang Dombret - Kali ini kita akan membuat Tombol Back To Top dengan Efek Bounce , kenapa saya sebut Goyang Dombret ? Itu sebutan si pemilik Script ini saja yang bilang efeknya Goyang dombret . Ya , Kang Ismet yang menyebutnya goyang dombret .

Melihat dari efek yang ditampikan ini membuat saya tertarik untuk kembali men-share cara membuat tombol ini untuk anda . Nah jika anda ingin tau seperti apa hasilnya , mari kita buat dulu tombol back to topnya .

Aammm , sebelum membuatnya , sedikit penjelasan dulu dari fungsi tombol ini untuk blog anda .
Fungsi tombol Back To Top adalah untuk kembali ke halaman atas dengan sekali klik . Dan itu lebih mudah dan simpel ketimbang harus menggulir scroll mouse yang bisa terlalu lama kalau halaman tersebut penuh dengan komentar panjang .

Okelah daripada lama-lama ngejelasin yang malah bikin jadi gak jelas , langsung saja kita mulai membuatnya .

Silahkan masuk ke template Blog dan cari kode </head>
Letakkan script dibawah ini tepat diatasnya

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

Jika di template anda sudah ada , maka lewati langkah ini .

Langkah selanjutnya , tempatkan script dibawah ini tepat di atas kode </head>

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

Simpan Template

Langkah ketiga ,
Buat widget baru dan pilih HTML/JavaScript
Letakkan script ini di dalamnya

<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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div> 

Langkah terakhir , simpan dan lihat di blog anda .

Untuk mencobanya , gulir kebawah halaman anda hingga tombol ini muncul . Kemudian klik . Dan lihat apa yang terjadi .

source : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html