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

Artikel Terkait: