Sabtu, 21 November 2009

jQuery Scroll to top


Membuat auto scroll / scroll to top ada banyak cara, di antaranya adalah dengan cara membuat link ke bagian div yang di inginkan atau juga dengan cara memasukkan script  scroll 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 (nah loh... keren kan... ), dan efeknyanya seperti accordion, sangat mulus ketika meluncur ke atas. bisa anda coba di blog ini sebelah Pojok Kanan Bawah .

Cara membuatnya mudah sekali
  1.  Pertama masuk ke halamat edit HTML
  2. Cari tag </body> Kemudian Paste Kode Berikut di Atasnya :
    <a href="#" id="toTop"><img src="http://blog.ph-creative.com/pics/up.png" /></a>
  3. Kemudian masukkan kode di bawah ini :
    #toTop { border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:1px;right:5px;cursor:pointer;color:#666;text-decoration:none; }
    Taruh di atas kode ]]></b:skin> 
  4. Setelah itu, sekarang kita tinggal memasukkan kode jQuerynya. cari tag </head> kemudian Paste kode berikut ini di atasnya
    <script src="http://zifoe.ok.googlepages.com/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://zifoe.ok.googlepages.com/jquery.scroll.pack.js" type="text/javascript"></script>
    <script src="http://zifoe.ok.googlepages.com/jquery.easing.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $("#toTop").scrollToTop({speed:1300,start:600});
    });
    </script>
  5. Langkah Terakhir. Simpan... Dan Lihat Hasilnya................. 
Selamat Mencobaa.....................


Oya, hampir lupa nich, ada yang mau Ngobrol Seputar Bisnis Online, gak? pasti seru dech...(sedikit sundulan gak apa-apa kan....he he )

    5.0
    Agregar a facebook

    Artikel Terkait:

    10 komentar:

    Zhys on 21 November 2009 19.48 mengatakan...

    mas,, gimna cranya ningkatan pagerank..????

    Tutorial Blog on 21 November 2009 20.17 mengatakan...

    mantap tipsnya....

    Tutorial Blog | Iklan Baris

    @Zhys, cara meningkatkan PageRank coba lihat di blogku ya...heheehe

    Dheny Gnasher on 21 November 2009 21.52 mengatakan...

    wah wah, tips nya sangat keren
    pengen coba ahh!
    jangan lupa komentar balik ya sobat! makasih

    Auto on 21 November 2009 22.05 mengatakan...

    wah bisa di coba ne, trims infonya

    zifoe on 21 November 2009 22.25 mengatakan...

    @zhys: Tuh udah di jawab ama sobat tutorialBlog.. :D
    @TutorialBlog: makasih.... ;;)
    @Dheny: silahkan dicoba sob... iya.. segera meluncur ke TKP :))
    @Auto: Sama² sob.... ;)

    Anonim mengatakan...

    Kejar Setoran Ya Mas... =))

    zifoe on 22 November 2009 13.33 mengatakan...

    @Anonim: wkwkwkwkwkw..... bisa aja neh.... :)) =))

    Mas Adi on 23 November 2009 07.34 mengatakan...

    wah....tutorialnya ok banget bos....
    apalagi ada sundulannya tuch...
    wue eee ee e...

    Fattah Naim on 23 November 2009 20.09 mengatakan...

    wah,,,, bagus nih,,, tapi apakah ini ngak mempengaruhi berat blog kita sobb ? :-/

    secangkir teh dan sekerat roti on 23 November 2009 20.34 mengatakan...

    gag ngerit mas.. tapi boleh kita bertukar link..??
    link nya mas udah saya psang.. maksih

    Poskan Komentar

     

    Recent Comment

    Pengikut