Make Back To Top Button With Scroll Smooth Jquery

Bismillah... Back To Top With Smooth Scroll JQuery, Alhamdullillah setelah sebelumnya saya telah menjelaskan beberapa cara membuat tombol back Top Top ini diantaranya :

1. 2 Cara membuat Tombol Back To Top
2. Membuat Tombol Back To Top Dengan JQuery

Untuk kali ini saya akan menjelaskan cara membuat tombol back to top dengan dengan jQuery namun dengan adanya Effect Smoot Scroll. Artinya Ketika tombol back to top ini di KLIK, maka ketika Posisi Scroll halaman kembali keatas dengan lembut. Selain itu, proses pemasangan Back To Top ini tidak akan membuat kalian bingung alias saya akan menjelaskan secara simple proses pemasangnya.

Untuk Pembuatan Tombol back To Top ini silahkan kalian baca selengkapnya dibawah ini :

1. Login Ke blogger Kalian
2. Pilih Rancangan --> Elemen Halaman
3. KLIK tambah Gadget --> HTML/Java Script
4. Simpan Kode berikut dalam Konten HTML/Java scriptnya

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

Keterangan :
Perhatikan Kode warna Biru diatas, Jika dalam HTML template kalian sudah terdapat kode tersebut, silahkan simpan kode warna merah aja.

5. Simpan Template Kalian

Tambahan :
Gambar atau Ikon Back To Top yang saya pasang pada kode tersebut adalah seperti ini,



Bagi kalian yang ingin merubah/mengganti gambarnya, silahkan ikuti tahap-tahapnya dibawah ini:

1. Copy kode ini dan paste pada address bar browser kalian :

http://myscriptforme.googlecode.com/files/kaluhur.js

2. Simpan kode Js tersebut ke komputer kalian
3. Klik Kanan Kode Js nya, lalu pilih EDIT / Open With Notepad
4. cari Kode berikut :

controlHTML: '<img src="http://lh4.ggpht.com/_MvLBi88bM_I/TKALCyZ0_wI/AAAAAAAABgE/a9P_kEOqO-o/to%20top.png" style="width:60px; height:30px" />'

5. Ganti kode warna merah dengan URL gambar Back To Top Kalian
6. Klik Save
7. Upload File JS nya ke Hosting Penyimpanan File, seperti Googlecode. untuk cara upload nya bisa kalian baca ARTIKEL saya DISINI.
8. Copy URL File JS nya dan simpan dalam kode pada langkah No. 4 proses pemasangan diatas.

JAngAn LupA diSimpaN ya ....

untuk gambar/ikon back to top nya silahkan kalian pilih dibawah ini atau kalian juga bisa menggunakan gambar milik kalian.

Keterangan :
Untuk mengambil gambar diatas, silahkan kalian KLIK KANAN pada gambar, lalu pilih COPY IMAGE LOCATION untuk mengambil URL GAMBAR.

Semoga bermanfaat dan semoga membantu. Terima kasih....

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.