Membuat auto scroll ada banyak cara, di antaranya adalah dengan cara membuat link ke bagian div yang di inginkan atau juga dengan cara memasukkan script autoscroll dengan javascript, kali ini saya coba membahas bagamaimana cara membuat autoscroll dengan script jquery yang menurut saya auto scroll ini tampak lebih dinamis ketika kita melihat bagian header dari blog kita maka autoscroll tersebut tidak muncul dan ketik kita scroll menuju ke bawah blog baru autoscrollnya muncul (bingung ga sih-red), dan efeknyanya seperti accordion, sangat mulus ketika meluncur ke atas.
Cara membuatnya mudah sekali1. Pertama masuk ke halamat edit HTML
2. Kemudian masukkan kode ini <a href='#' id='toTop'>^ Scroll to Top</a> sebelum kode </body>
3. Kemudian masukkan kode di bawah ini :
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
di atas kode ]]></b:skin>
4. Setelah itu masukkan kode jquery ini :
<script src='http://subagya.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://subagya.googlepages.com/jquery.scroll.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop();
});
</script>
sebelum kode </head>
5. Simpan dan lihat hasilnya.
Kalau mau lihat lebih detail lagi silahkan meluncur ke sini sekalian lihat demonya biar yakin xixixixi.
wakakkaka, bener bro. mulus banget jalan scrollnya :D
ReplyDeletekode .js nya dong mas... kekeke
ReplyDeletemantap...
ReplyDeletewow mantap, saya sudah melihat demonya. Sepertinya pas buat para blogger yang suka menulis artikel tanpa menggunakan readmore.
ReplyDeleteAKu bookmark dulu, ntar aku pasang di model template yang sedang aku modif..
makasih atas sharing artikel ini.
lo pakai GooglePages? katanya mau tutup ya?
ReplyDeletekalao tutup beneran blog bisa ncur lhak'an
wah, bagus ni tutorialnya. langsung nyoba..
ReplyDeletetips yang menarik mas.. saya pelajari dulu caranya
ReplyDeleteLangsung praktek dan meluncur dengan pasti kang :)
ReplyDeleteTTg mano, ga tau tuh disuntik apaan bisa segede gitu he.h.e..
Wah, mantap nih. Bisa dipake di wordpress ngga mas, sori ngga pake blogspot.
ReplyDeletekalau ke purwokerto. silahkan mampir mas
ReplyDelete@ all > membuat jump to top ini sangat mudah
ReplyDeleteMulus banget, naik ke bagian atas websitenya bagus. top markotop lah.
ReplyDeletebtw, lama tak jumpa
Nice info...
ReplyDeleteMaw coba ah..
Mo tak coba di blog yg baru ni, thx sharingnya mas. matur nuhun
ReplyDeletehmm coba ah makasih infonya
ReplyDeletekekkekekekkee jquery nya puwanjaaang, pake manual aja wes #
ReplyDeletekeren mas. sambil dipraktikin dulu yah.:D
ReplyDeleteSore Suhu,...
ReplyDeleteno comment dulu. sumpeh gw masih geleng-geleng ama suhu yang makin melekat dengan kode-kode.
welleh-welleh,....
ini kode buat jump to top ya sob..? saya buka link demonya tapi ga kebuka2.. -_-
ReplyDeleteto belajar seo > bisa ko demonya sudah saya check
ReplyDeletethanks mas, biar saya coba dulu dah...
ReplyDeletepost ok om,,thanks
ReplyDeletedah ke tekape.. mulus euy :D
ReplyDeleteSip tipsnya, bisa langsung dicoba tuh
ReplyDeletekerennnnnnnnnnn....langsung coba!!
ReplyDeletemakasih tips nya mas saya coba buat nambah ilmu
ReplyDeletewah ini tips buat belajar newbie blog kaya gue sangat berarti banget...makasih mas
ReplyDeletemantap juragan!!!
ReplyDeleteblog saya masih baru.. nanti coba pasang ah, btw koleksi templatenya keren2 bro..!
ReplyDeleteterima kasih atas support yang diberikan terhadap template baru kami
ReplyDeletethank's cuma kira-kira diberi nama apa ya, bingung nich
ReplyDeletetrims sobat untuk infonya Langsung ACTION
ReplyDeleteArtikelnya bagus sekali, terimakasih.
ReplyDeleteFrom:
Agung Nugroho (celunk)
Owner http://icakicik.com
gfhjfgh
ReplyDeleteBos mochal.., scroll yang bisa goyang kiri-kanan ada gak :D
ReplyDeleteteng,yu ya kang!
ReplyDeletewah tingkat tinggi.
ReplyDeletehmmm.. I do use this smooth scroll back to top with jquery. this nice n easy to used.
ReplyDeleteif u want to tweaking more, its can modify to scrolling content. :D
makasih infonya.
ReplyDeleteWah, ini sangat berguna sekali. Langsung praktek neh. Tararengkyu bos!!!
ReplyDeleteMantap brow
ReplyDeletewah keren banget nih... langsung praktekkkk
ReplyDeleteklo liat dan baca disini jadi gampang, thank buat pencerahannya
ReplyDeletemantap bgt..sip deh
ReplyDeletelangsung praktek...makasih ya atas tips nya dan ditunggu posting selanjutnya.
ReplyDeletesalam
tips dah dilaksanakan...mudah mbanget ya. thank for sharing.
ReplyDeletesalam
Mengembalikan jati diri bangsa
wah ini materi yang saya cari. Sangat berguna sekali bagi saya. Thank's yah bro.
ReplyDeleteEmang manteb mas Jquery, naik ke topnya lembut.
ReplyDeletesluur,,
wahduwh susah mas...say ga isa-isa..gaptek saya ini...
ReplyDeleteKeren mas.. Walaupun agak susah dimengerti.. Maklum masih nyubi.
ReplyDeletekeren broer...teruskan.
ReplyDeletesalut buat bagi bagi ilmunya
wah sayang wordpress.com tidak bisa dipasangi seperti blogspot yah!?
ReplyDeleteTapi postingan ini sangat bermanfaat sekali.
mas subagya,
ReplyDeletemakasih yach atas infonya ini. sangat bermanfaat bagiku
mantap juragan...sangat bermanfaat bagi newbie sepertiku. dan juga banyak rekan lain yang berkomentar, menandakan artikel juragan subagya emang oye
ReplyDeletePak Subagya,
ReplyDeletebagi bagi ilmunya sangat bermanfaat bagi saya sebagai newbie. ditunggu artikel artikel nya yang lain
Muantep gan...lanjut terus dengan artikel artikel lain yang bermutu, kan kukunjungi blog ini secara teratur
ReplyDeletekaos | kaos distro | distro online | distro
ReplyDeletelUMAYAN ARTIKELNYA
Wah mantab banget tutorial nya!
ReplyDeletebos minta dukungannya ya!
ReplyDeleteHi,
ReplyDeletemakasih atas sharing pengetahuan yang berguna ini.
salam
Acai Berry
wah tutorial nya bagus
ReplyDeletebermanfaat mas tutorilanya tapi java scripnya ga di share ya mas ... biar bisa link dari web sendiri gitu...
ReplyDeletewah makin mantap aja nih terima kasih gan buat infonya
ReplyDeleteijin nyoba ya gan makasie :)
ReplyDeletemantap nih.. coba dulu ahh...
ReplyDeletekeren browww.... perlu di coba nich....
ReplyDeletetak coba dulu yah mastah, mampirlah ke blog saya yah tentang Ikan,ikan, dan ikan
ReplyDeletegak mudeng kalo dah pake bahasa pemrograman ^-^
ReplyDeletekadang dah pake plugin juga masih bingung aku...apalagi harus pake kode html gini..
ReplyDeletekeren...thanks infonya
ReplyDeletewah mantap gan..
ReplyDeletethanks info
bingung bahasa gituan:D, tp makasih dah mau share:)
ReplyDeletewah, mantep bener bro.. berarti yang kayak tulisan back to top itu ya? atau ada perbedaan? thanks..
ReplyDeleteAstaga keren niey Infonya!!!
ReplyDeleteSemoga bermanfaat..
Thx mas
Nice share gan
ReplyDeleteMantap Tutorialnya gan
ReplyDeletethank
trima ksih ilmu'na gan..
ReplyDeleteSedang belajar php, belum nyampai ilmu jquery.
ReplyDeleteHmm..
ReplyDeleteOk thanks for the tutorial.
jquery emang bikin jd bagus ya..keren
ReplyDeletesetuju sob, jquery emang mantap
ReplyDeleteNice info
ReplyDeleteasli msh kurang ngerti saya dengan javascript :(
ReplyDeletePerlu kitab jquery nie kyknya.
ReplyDeleteseru sih, tp ribet. Memang itu tantangan programmer. :)
Thx info nya boss dan thanks juga untuk backlinknya
ReplyDeleteThanks tutornya...Coba ahhh
ReplyDeleteni kode buat jump to top ya sob..?
ReplyDeleteAsyik dapet ilmu lagi disini, terima kasih ya.
ReplyDeletekayaknya tingkat tinngi banget nih tipsnya gan.. ane coba ah di blog ane. makasih infonya
ReplyDeleteSiiip....Ane coba nih gan tips nya...
ReplyDeleteMakasih dlu gan...
information helpully, please keep sharing...
ReplyDeletewah...
ReplyDeletemoga jd ilmu yang bermanfaat kangmas.. :)
makasih atas bantuannya. sukses selalu
ReplyDeleteBakal saya coba di blog saya yang pake blogspot. Semoga ga terlalu bingung mengingat ini ilmu baru buat saya..
ReplyDeleteBtw, makasih share-nya..
mantap gan...boleh dicoba tuh
ReplyDeletedi coba dolo bang
ReplyDeletemantap gan !! :D
ReplyDeleteini yang ane cari² dari kemaren, makasih ya ! :D
Mantap banget gan .. Thxs atas Informasiny
ReplyDelete