Find What You Need

9 Mar 2010

Back To Top JQuery / Smooth Scroll Kembali Ke Atas

Jika kita mempunyai article yang panjang sekali kebawah, tentu untuk kembali keatas, kita harus men-scrollnya. Supaya kita tidak usah men-scroll halaman web kita jika ingin kembali ke atas, ada cara yang paling mudah, yaitu dengan di buatkan tombol kembali ke atas /gulir ke atas atau back to top, Sehingga lebih cepat karena cuma memerlukan waktu  sepersekian detik.

Teknik kembali keatas ini memakai kode javascript, sehingga nantinya 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> .
Kemudian baru di simpan atau save. Dan coba sekarang apa sudah muncul tombol gulir keatas, jika sudah selamat anda telah berhasil.



**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

4 komentar:

rezer007 Pada 29 Maret 2010 pukul 11.50 mengatakan...

thanks..sgt berguna :D

Albaniyu Pada 29 Maret 2010 pukul 18.11 mengatakan...

You are welcome...;)

I'm → Botzzz Pada 11 November 2010 pukul 16.25 mengatakan...

nice info sob.....

salam knl ya......
jika berkenan silahkan mampir balik...

Amazing Life and Music Pada 25 Februari 2011 pukul 22.55 mengatakan...

Thx bro. Buat yg lain main2 donk ke blog ku.. :))

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template