Back to Top atau Go Top, adalah merupakan satu tombol atau tulisan yang berfungsi untuk menggeser halaman blog ke atas halaman. Fungsi Back to top ini sangat berguna jika suatu blog memiliki halaman yang sangat panjang, sehingga pada saat kita berada pada baris akhir suatu halaman dan ingin kembali keatas halaman tersebut maka sangat terasa memakan waktu jika menggunakan scroll up mouse. Namun dengan cara ini kita tidak perlu lagi untuk memutar scroll untuk kembali keatas.
Seperti kebanyak blog-blog lain, blog ini juga menggunakan tombol Back to Top / Go Top, coba lihat tombol persis bawah kanan atau seperti gambar dibawah ini :
Kalau saya lihat kebanyakan blog hanya menggunakan kode standar yang diletakan pada file footer.php yaitu seperti dibawah :
<a href="#" target="_top">#</a>
Ya, dengan cara diatas, kita sudah memasang tombol/menu Back to top, namun disini saya ingin berbagi bagaimana membuat Back to Top dengan tambahan fasilitas JQuery, sehingga hasilnya sedikit berbeda, sebagai contoh live klik tombol dibawah kanan pada blog ini :
Beda dari cara dan hasilnya adalah yaitu pada saat sudah mendekati pada atas halaman maka pergeserannya melambat sehingga terkesan ada proses pengereman layaknya mobil, nah untuk melakukannya ikuti step-step dibawah ini :
- Unduh File Gotop.zip
- File hasil extract gotop.zip terdiri dari
base.js,top.cssdangotop.png - Buat folder
gotoppadarootfolder anda dan upload ketiga file tersebut diatas - Berikutnya edit file
header.php, dan tambahkan baris dibawah ini sebelum baris</head>atau disesuaikan saja.
<script type=”text/javascript” src=”http://namadomain/gotop/base.js”></script>
<link href=”http://namadomain/gotop/top.css” rel=”stylesheet” type=”text/css” />
Berikutnya, silahkan copy code dibawah ini di filefooter.php:
<a id=”gotop” href=”#” onclick=”MGJS.goTop();return false;”></a>
Selesai.
Sampai disini silahkan load kembali blog anda, dan semestinya menu gotop akan tampil di bawah kanan blog anda. Jika sekiranya masih tata letaknya kurang pas, maka silahkan edit file top.css.
Bagaimana, apakah blog anda sudah terpasang tombol Back to Top ?
amankan dulu
wekekekkeke… bisa canggih begitu ya.. ck ck ck.. *cupu*
tak secanggih helm anda sob
asyik, blognya jadi canggih…
ingin perubahan sob
hm.. ada baiknya bikin gak usah pake JS. soalnya bikin kecepatan loading berkurang.
tinggal a href=”#” aja udah back ke atas kok
mungkin dapat di solusikan dengan
menggunakan jQuery lazy load plugin sob
Weleh mantep gan, naeknya meluncur gitu
iya
kaya air muncrat yaa
cocok untuk blog dgn artikel panjang, macam blog novel
Iya ya, kaya novel
Ehmm.patut di coba..makasih infonya.salam kenal semua silahkan berkunjung juga ke blog saya..
Salam kenal kembali sob
dengan tampilan seperti ini sangat memudahkan kembali pada menu utama blog.
Terimakasih telah berbagi. 8)
betul sekali pak,
Sangat memudahkan memang
Sangat luar biasa nih infonya..
terima kasih pak
Punya saya ternyata template nya dah ada btw standard saja
wah, sudah cukup dunk pak
yang standar-standar aja
wah…, boleh juga nie ditambahkan di blog semata wayangku
Ayo buruan sob
Wah keren mas.. di integrasikan ke WordPress semakin smooth…
@Panduan WordPress,
sayapun semakin cinta sama WP
saya biasanya cuman pakai bawaan theme aja, tapi ini patut dicoba
@arifudin,
Silahkan dicoba pak
themes saya ada back to contentnya mas. tp gak tau buat pake apa.. maklum themes buatan orang lain
btw themesnya baru mas? keren niih
@tomi,
Iya sob, pake baju baru
mantab bos tutorialnya!!! tengkyu
@ario saja,
Sama-sama sob
buat Wp gratisan bisa ga mas
@nurhayadi,
wah, nggak bisa gratisan sob
keren sobat
teruslah berbagi ilmu
dan saya belajar
@achoey,
mari belajar
Siip deh. Sangat berguna kalau ingin ke atas lagi tanpa harus scrolling mouse. Tapi lebih sip lagi kalau bikin ‘flyover button’ (yang terpisah dari halaman browser). Jadi kalau mau ke atas buttonnya diklik tapi ke atasnya perlahan2, kalau kita ketemu dengan baris yg akan dicari kita klik lagi itu button lalu berhenti. Kemudian kalau sudah selesai klik maka halaman scroll kembali ke atas dst…
Tapi tombol ‘top’ ini sudah sangat membantu kok. Sip deh pokoknya.
@Yari NK,
terimakasih pak,
tapi info dari bapak Yari layak saya coba kelak, sambil googling dulu
klo blog saya kebetulan sudah ada fasilitas “back to top” dari templatenya sob
tapi postingannya mantab nich, jadi tau kode yg sebenarnya….
ok dech, trims atas tutorialnya
@Fir’aun NgebLoG,
sama-sama sob
lha bisa dipake di blogspot mas?
@open your mind,
sebetulnya bisa sob,
cuman menaruh file yang bersangkutan harus menggunakan pihak ke 3
tapi agak ribet
mantab tips-nya, mas dikma. terima kasih share infonya. pingin langsung pakai, hehe …
@sawali tuhusetya,
Buruan pak
test
@donny,
test, ketendang bang akismet.
terima kasih tips ini..akan saya rujuk nanti
@donny,
Silahkan kelak dicoba
waaah mas ini file gotop.zip nya udh ga ada ya T_T