Membuat tombol Back to Top dengan JQuery (Smooth Version)

Fungsinya sama dengan postingan ini, hanya saja widget ini akan scrolling ke bagian paling atas website yang memasangnya ketika diklik.

Fungsi Back to Top ini sangat berguna jika pengunjung blog malas scrolling ke atas, hanya dengan sekali klik maka JQuery ini akan melakukan tugasnya.

Langsung saja:

- Login ke blogger
- Pada Dashboard, klik Design > Edit HTML
- Download file ini lalu buka menggunakan Notepad

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

- Lalu edit controlHTML: '<img src="up.png" style="width:48px; height:48px" />', menjadi kode dibawah:

controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLngN7p_VW_7aCx34f3UWi29_zduA7256CXUujKBZfpG-aEuDY-Grr8lSggPPstSDv7m7T7_GklG6JdoR9Ewz_zrgbJQeddHs_8QtfqHdmgw8-6cDmiOoyvjPfjKMsTniT3HxZJEnkQQI/s1600/up.png" style="width:48px; height:48px" />',

- Lalu klik "File > Save"
- Kemudian upload ke hosting anda
- Lalu copy kode ini dan paste diatas kode </head> :

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

<script type="text/javascript" src="http://[URL_scrolltopcontrol_ANDA].com/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>

- Ganti tulisan http://[URL_scrolltopcontrol_ANDA].com/scrolltopcontrol.js dengan link file yang anda upload tadi

- Setelah itu masukkan kode ini diatas kode </body> :

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

- Kemudian save dan lihat hasilnya


Widget ini akan tidak terlihat jika anda berada di paling atas blog, dan akan muncul ketika anda scroll kebawah dan berfungsi dengan baik.

PENTING: JANGAN LUPA, BACKUP TEMPLATE ANDA SEBELUM MELAUKAN TRIK INI!