Membuat Berjalan Smooth Tombol Kembali Ke Atas

             


            Ada 2 teknik untuk membuat  tombol kembali keatas ini atau back to top, tapi  teknik yang akan kita buat adalah teknik dengan menggunakan Jquery dan javascript .
Teknik kembali keatas yang memakai kode jquery dan javascript mempunyai kelebihan, yaitu ketika di klik tombol kembali ke atas, jalannya secara perlahan alias smooth. Jadi kelihatan lebih keren. Untuk memasang kode javascripnya seperti biasa kita harus :

Sigin di draft blogger
Dalam dasbor masuk Tata Letak --> Edit HTML
Simpan gambar berikut dalam format png, kemudian upload ke file hosting image anda .

Download dulu ini scrolltopcontrol.js  . Setelah anda download, sebelum menyimpannya anda bisa mengedit dulu settingan berikut , copy lalu edit dalam notepad, cari yang seperti ini :

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />, //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links.


Sedikit Keterangan :

startline : munculnya tombol gulir ketika kita menscroll halaman web kebawah. Kita bisa merubah nilai dari startline ini untuk menentukan kapan munculnya tombol gulir ini.

scrollto : menampilkan sampai batas mana di halaman web anda, saat tombol gulir discroll dari bawah. Tetapi kita harus membuat ID dulu untuk itu, dengan menentukan nilainya misalnya dengan 50. Jadi untuk sementara biarkan saja dengan nilai "0".

scrollduration : kecepatan waktu scroll dari bawah. Semakin tinggi nilai nya semakin lambat naik keatasnya.

controlHTML : masukan alamat url image anda disini, contohnya image yang tadi di copy diatas. Untuk ukurannya anda bisa sesuaikan dengan ukuran image anda, dengan mengubahnya dalam style.

controlattrs : penempatan posisi tombol gulir keatas, dengan merubah nilai dari offsetx dan offsety.

Setelah selesai di edit baru simpan dengan nama scrolltopcontrol.js , kemudian upload ke file hosting anda .Nantinya file ini akan ditempatkan didalam kode dibawah ini.
Kemudian kita copy kode javascript berikut :

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

<script type="text/javascript" src="Ganti dengan URL javascript anda/scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- �© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>

 Kemudian simpan atau paste di atas kode ini </head>

Setelah itu masukan kode ini :

<div id='topcontrol'>
</div>

Simpan diatas </body> .

Setelah selesai ditempatkan , jangan lupa disave. Kemudian buka halaman blog anda untuk melihat hasilnya .

**** Selamat Ngeblog ****