Sunday, May 15, 2011

JavaScript Scrolling Animation Using scrollTop

Using only the scrollTop and scrollHeight property it is possible to create a nice scrolling effect.scrollTop and scrollHeight aren't W3C recommendation but these properties exist in all the modern browsers. I have checked it in Chromium,Firefox,IE and Midori the following script works perfectly. Let's see the effect.

Javacript Scrolling Animation Using scrollTop property
****
*****
*******
*********
*******
***
****
*****
*******
*********
*******
***
Javacript Scrolling Animation Using scrollTop property




The code is pretty simple. For achieving the animation effect out our div should be overflown.

a = document.getElementById('scroll');
c = 0;
b = function()
{
 if(200+a.scrollTop == a.scrollHeight)
 {
  a.scrollTop = 0;
  c = 0;
 };
 c++;
 a.scrollTop = c;
 setTimeout('b()',10)
}
b();

Need Explanation?

scrollTop(integer) property shows that how far you have scrolled from the top. You can also set a value to scrollTop which will scroll automatically to a value specified.

we have a recursive function that sets the scrollTop property. If we reach at the bottom of our element that's when if(200+a.scrollTop==a.scrollHeight) we reset the scrollTop property.

Here is a tutorial about How you can achieve the same animation using margin.

If You need more explanation, Let me Know.

No comments:

Post a Comment

About Me

Web Developer From Dhaka, Bangladesh.