Membuat autoscroll dengan jquery

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 sekali
1. 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() {
                $(&quot;#toTop&quot;).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.

98 comments:

  1. wakakkaka, bener bro. mulus banget jalan scrollnya :D

    ReplyDelete
  2. kode .js nya dong mas... kekeke

    ReplyDelete
  3. wow mantap, saya sudah melihat demonya. Sepertinya pas buat para blogger yang suka menulis artikel tanpa menggunakan readmore.
    AKu bookmark dulu, ntar aku pasang di model template yang sedang aku modif..
    makasih atas sharing artikel ini.

    ReplyDelete
  4. lo pakai GooglePages? katanya mau tutup ya?
    kalao tutup beneran blog bisa ncur lhak'an

    ReplyDelete
  5. wah, bagus ni tutorialnya. langsung nyoba..

    ReplyDelete
  6. tips yang menarik mas.. saya pelajari dulu caranya

    ReplyDelete
  7. Langsung praktek dan meluncur dengan pasti kang :)

    TTg mano, ga tau tuh disuntik apaan bisa segede gitu he.h.e..

    ReplyDelete
  8. Wah, mantap nih. Bisa dipake di wordpress ngga mas, sori ngga pake blogspot.

    ReplyDelete
  9. kalau ke purwokerto. silahkan mampir mas

    ReplyDelete
  10. @ all > membuat jump to top ini sangat mudah

    ReplyDelete
  11. Mulus banget, naik ke bagian atas websitenya bagus. top markotop lah.
    btw, lama tak jumpa

    ReplyDelete
  12. Mo tak coba di blog yg baru ni, thx sharingnya mas. matur nuhun

    ReplyDelete
  13. kekkekekekkee jquery nya puwanjaaang, pake manual aja wes #

    ReplyDelete
  14. keren mas. sambil dipraktikin dulu yah.:D

    ReplyDelete
  15. Sore Suhu,...
    no comment dulu. sumpeh gw masih geleng-geleng ama suhu yang makin melekat dengan kode-kode.
    welleh-welleh,....

    ReplyDelete
  16. ini kode buat jump to top ya sob..? saya buka link demonya tapi ga kebuka2.. -_-

    ReplyDelete
  17. to belajar seo > bisa ko demonya sudah saya check

    ReplyDelete
  18. Sip tipsnya, bisa langsung dicoba tuh

    ReplyDelete
  19. kerennnnnnnnnnn....langsung coba!!

    ReplyDelete
  20. makasih tips nya mas saya coba buat nambah ilmu

    ReplyDelete
  21. wah ini tips buat belajar newbie blog kaya gue sangat berarti banget...makasih mas

    ReplyDelete
  22. blog saya masih baru.. nanti coba pasang ah, btw koleksi templatenya keren2 bro..!

    ReplyDelete
  23. terima kasih atas support yang diberikan terhadap template baru kami

    ReplyDelete
  24. thank's cuma kira-kira diberi nama apa ya, bingung nich

    ReplyDelete
  25. Artikelnya bagus sekali, terimakasih.

    From:
    Agung Nugroho (celunk)
    Owner http://icakicik.com

    ReplyDelete
  26. Bos mochal.., scroll yang bisa goyang kiri-kanan ada gak :D

    ReplyDelete
  27. hmmm.. I do use this smooth scroll back to top with jquery. this nice n easy to used.

    if u want to tweaking more, its can modify to scrolling content. :D

    ReplyDelete
  28. Wah, ini sangat berguna sekali. Langsung praktek neh. Tararengkyu bos!!!

    ReplyDelete
  29. wah keren banget nih... langsung praktekkkk

    ReplyDelete
  30. klo liat dan baca disini jadi gampang, thank buat pencerahannya

    ReplyDelete
  31. langsung praktek...makasih ya atas tips nya dan ditunggu posting selanjutnya.

    salam

    ReplyDelete
  32. tips dah dilaksanakan...mudah mbanget ya. thank for sharing.

    salam
    Mengembalikan jati diri bangsa

    ReplyDelete
  33. wah ini materi yang saya cari. Sangat berguna sekali bagi saya. Thank's yah bro.

    ReplyDelete
  34. Emang manteb mas Jquery, naik ke topnya lembut.
    sluur,,

    ReplyDelete
  35. wahduwh susah mas...say ga isa-isa..gaptek saya ini...

    ReplyDelete
  36. Keren mas.. Walaupun agak susah dimengerti.. Maklum masih nyubi.

    ReplyDelete
  37. keren broer...teruskan.

    salut buat bagi bagi ilmunya

    ReplyDelete
  38. wah sayang wordpress.com tidak bisa dipasangi seperti blogspot yah!?
    Tapi postingan ini sangat bermanfaat sekali.

    ReplyDelete
  39. mas subagya,
    makasih yach atas infonya ini. sangat bermanfaat bagiku

    ReplyDelete
  40. mantap juragan...sangat bermanfaat bagi newbie sepertiku. dan juga banyak rekan lain yang berkomentar, menandakan artikel juragan subagya emang oye

    ReplyDelete
  41. Pak Subagya,
    bagi bagi ilmunya sangat bermanfaat bagi saya sebagai newbie. ditunggu artikel artikel nya yang lain

    ReplyDelete
  42. Muantep gan...lanjut terus dengan artikel artikel lain yang bermutu, kan kukunjungi blog ini secara teratur

    ReplyDelete
  43. Hi,
    makasih atas sharing pengetahuan yang berguna ini.

    salam
    Acai Berry

    ReplyDelete
  44. bermanfaat mas tutorilanya tapi java scripnya ga di share ya mas ... biar bisa link dari web sendiri gitu...

    ReplyDelete
  45. wah makin mantap aja nih terima kasih gan buat infonya

    ReplyDelete
  46. keren browww.... perlu di coba nich....

    ReplyDelete
  47. tak coba dulu yah mastah, mampirlah ke blog saya yah tentang Ikan,ikan, dan ikan

    ReplyDelete
  48. gak mudeng kalo dah pake bahasa pemrograman ^-^

    ReplyDelete
  49. kadang dah pake plugin juga masih bingung aku...apalagi harus pake kode html gini..

    ReplyDelete
  50. bingung bahasa gituan:D, tp makasih dah mau share:)

    ReplyDelete
  51. wah, mantep bener bro.. berarti yang kayak tulisan back to top itu ya? atau ada perbedaan? thanks..

    ReplyDelete
  52. Astaga keren niey Infonya!!!
    Semoga bermanfaat..
    Thx mas

    ReplyDelete
  53. Sedang belajar php, belum nyampai ilmu jquery.

    ReplyDelete
  54. asli msh kurang ngerti saya dengan javascript :(

    ReplyDelete
  55. Perlu kitab jquery nie kyknya.
    seru sih, tp ribet. Memang itu tantangan programmer. :)

    ReplyDelete
  56. Thx info nya boss dan thanks juga untuk backlinknya

    ReplyDelete
  57. Thanks tutornya...Coba ahhh

    ReplyDelete
  58. ni kode buat jump to top ya sob..?

    ReplyDelete
  59. Asyik dapet ilmu lagi disini, terima kasih ya.

    ReplyDelete
  60. kayaknya tingkat tinngi banget nih tipsnya gan.. ane coba ah di blog ane. makasih infonya

    ReplyDelete
  61. Siiip....Ane coba nih gan tips nya...
    Makasih dlu gan...

    ReplyDelete
  62. information helpully, please keep sharing...

    ReplyDelete
  63. wah...
    moga jd ilmu yang bermanfaat kangmas.. :)

    ReplyDelete
  64. makasih atas bantuannya. sukses selalu

    ReplyDelete
  65. Bakal saya coba di blog saya yang pake blogspot. Semoga ga terlalu bingung mengingat ini ilmu baru buat saya..
    Btw, makasih share-nya..

    ReplyDelete
  66. mantap gan...boleh dicoba tuh

    ReplyDelete
  67. mantap gan !! :D
    ini yang ane cari² dari kemaren, makasih ya ! :D

    ReplyDelete
  68. Mantap banget gan .. Thxs atas Informasiny

    ReplyDelete