Increase number value while scrolling

Question

So I've seen on pages where as I scroll through the page numbers are changing and things are moving around, etc. based on the position of the page. Scrollorama is a good example of this.

While it helps with some of the other functions I want/need there is one i just can't seem to find a solution for. Increasing number values.

For example. I have a percentage on my site where I want it to say 45% but when I load the site I want it to say 0% and increase until it gets to its point on the browser and then stop at 45%.

Any plugins, ideas, or just know how to accomplish this?

Sorry if I am being vague. I wish I could find the examples I saw.

Possible duplicate? http://stackoverflow.com/questions/14777667/jquery-percentage-increases-as-user-scrolls — user1048676, Apr 03 '13 at 21:38
That works perfectly thanks. I really did spend quite the amount of time looking for something similar. Appreciate it. — Adrian Rodriguez, Apr 09 '13 at 18:24
Which worked perfectly? The possible duplicate or the answer below? — user1048676, Apr 09 '13 at 19:27
Sorry, the duplicate worked perfectly. I guess when I search I was too vague. — Adrian Rodriguez, Apr 15 '13 at 16:36

score 0 · Answer 1 · answered Apr 03 '13 at 21:51

you can use window.scrollTo(X,Y) function for scrolling to anywhere you like in javascript and for animating, you can use setTimeout or setInterval function in javascript.i write a function for you:

scrollAnimating = function(x,y){
     var stepX = 10;
     var stepY = 10;

     var animFunc = function(x1,y1){
          var newX = x1+stepX;
          var newY = y1+stepY;

          if(newX>x)
             newX = x;

          if(newY>y)
             newY = y;

          if(newX == x && newY == y)
             return false;

          window.scrollTo(newX,newY);

          window.setTimeout(function(){animFunc(newX,newY);},100);
     }
     animFunc(x,y);
}

you can use it like this: scrollAnimating(0,100);

and if you like to set perecentage value its simple, for example in scrollY if you like to scroll 45%:

scrollAnimating(0, 45*$(document.body).height()/100 );

Increase number value while scrolling

1 Answers1