Pasang Scroll Back To Top dengan efek memantul

Pada dasarnya tidak ada yang aneh dengan tips kali ini,hanya saja untuk review ulang mengenai fungsi scroll pada sebuah blog,maka tidak salahnya juga sis dan bro mencoba scroll up yang satu ini barsang kali aja belum pernah melihatnya wekawekaweka,,,

seperti yang kita ketahui juga scroll memiliki fungsi untuk menggulir secara otomatis ketitik awal sebuah halaman web dengan efektif.dan hal itu bisa dikatakan penting gak penting ,dikatakan penting karena kita tidak merasa kerepotan ataupun kesusahan bilamana ingin mengembalikan halaman sebuah web/blog ketitik awal secara efektif dengan singkat.tidak penting atau lebih halusnya lagi tidak terlalu penting dikarenakan kita masih bisa menggunakan secara manual cursor mouse /touch board pada USB dekstop ..namun itu kembali kepada selera anda masing-masing,dan  mungkin hal tersebut bisa anda persepsikan sendiri2 ?”yang pasti  menurut mimin sendiri,menggunakan scroll-back to top sangatlah efisien ,apalagi kalo kita sedang enak-enaknya membaca artikel orang lain dan isi dari artikel tersebut menerangkan soal pasangan muda yang baru menikah dan bulan madu di pulau bali eummm... cut..cut ...

kembali lagi ke pembahasan awal,.

Mengenai scroll yang ingin mimin share sama agan2 ini tentunya berbeda dengan  HCK orang lain,dan yang membedakan  Scroll yang mimin share ini mempunyai Efek bounce artinya efek seperti bola memantul ,sangat lah unik untuk dipasang di blog agan+sis dan tentunya gambar scroll bawaan bisa di ganti sesuai selera masing2 ,daripada penasaran langsung saja ke TKW ??’ TKP maksudnya...

1.seperti biasa buka blog milik anda

2.Buka Layout /Tata letak tambah Wiget baru pada HTML/javascrift

3.kemudian Tempel/Paste  code dibawah ini ke widget tersebut

<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/AVvXsEhNx9yvZCaw9PkN6OA8Jrckma426fDhqib9lZswrtrLBX4KGAVb_j0zjBkZUFZ7AXJKJQbtqPtA5w6OVyALPMmcl7SwRT1m11eis_XjIu1oE6mITuolf7kzeoeiNCgYyoB2T-0jykocgAE/s200/scrols+copy.png'/></div>

4.untuk sementara simpan dan buka ke Edit HTML

Cari code </head> dan tempelkan code dibawah ini tepat diatas kode tesebut

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

5.Simpan kemudian lihat hasilnya,jika penempatan kodenya benar maka akan sesuai dengan harapan anda

NB:

*Untuk penambahan kode agar tidak mengalami fungsi error ,anda tinggal tambahkan framework jquery pada Template yang belum ada jquery bawaan maka paste kode dibawah ini tepat diatas kode </head>, namun jika sudah ada lewati saja dan cukup dua kode diatas yang digunakan.

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

* untuk mengganti gambar scroll bawaan ,anda cari yang code berwarna  merah diatas lalu ganti dengan link code gambar yang didownload dengan ukuran 48x48 /sesuaikan dengan ukuran yang anda inginkan

Good Luck ...!!!