Senin, 06 Mei 2013

Batasi scroll lalu scroll otomatis


Scroll

Apa maksud dari judul posting ini? pasti anda bingung aku juga bingung harus beri judul apa. oke jadi ceritanya seperti ini, saat anda menscroll lebih dari 500px ke Arah bawah ( secara Vertikal ) maka fungsi scroll otomatis akan di eksekusi seperti apakah cara kerjanya langsung saja lihat ilustrasinya dulu.

ILUSTRASI

Silahkan anda Scroll pelan-pelan saja untuk melihat efeknya. dulu pernah disebuah group facebook temen-temen share link yang menuju ke sebuah web yang mempunyai fungsi scroll otomatis dan cara kerjanya hampir mirip seperti yang aku share kali ini. aku lupa url webnya, yang masih aku ingat adalah webnya itu dari jepang.

Script fungsi autoScroll aku dapat dari Sini lalu aku gabungin sama fungsi ScrollTop Jquery.

$(function(){
function autoScroll() {
  window.scrollBy(0, 1);
  scrolldelay = setTimeout('autoScroll()', 50)
}
$(window).scroll(function(){
if ($(window).scrollTop() > 500){
autoScroll();
}
});
});

Perhatikan kode 50 itu adalah kecepatan scroll, lalu kode 500 adalah batas scroll ke arah bawah secara vertikal. misalnya anda menggantinya dengan 1000 maka setelah anda scroll kebawah sepanjang 1000px barulah Fungsi AutoScroll akan di eksekusi.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function autoScroll() {
  window.scrollBy(0, 1);
  scrolldelay = setTimeout('autoScroll()', 1000)
}
$(window).scroll(function(){
if ($(window).scrollTop() > 500){
autoScroll();
}
});
});
</script>

Berguna atau tidak script ini, itu tergantung bagaimana kita memanfaatkannya sesuai kondisi.