Slow Down Onclick Window.scrollby

I am looking the code for making JavaScript window.scrollBy slower, but I haven't found anything. Could some one please advise me how to animate this type of JavaScript scrolling.

Solution 1:

Not sure this is the best way to do that but it works fine, is nice and clear:

functionscrollByRate(y, rate) 
{
  //calculate the scroll heightvar scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);

  //save the old value as "static" vararguments.callee.tmp = arguments.callee.tmp || scrolling + y;

  //make a little scrolling stepwindow.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);

  //are we arrived? if no, keep going recursively, else reset the static varif(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
  elsearguments.callee.tmp = undefined;      
}

Then your onclick will be like:

<ahref="javascript:void(0);"onclick="scrollByRate(1000,20)">Scrolling down slowly</a>

Try it here

functionscrollByRate(y, rate) {
    var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);
    arguments.callee.tmp = arguments.callee.tmp || scrolling + y;
    window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);
    if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
    elsearguments.callee.tmp = undefined;      
}

p {
  height:100px;
}

<p><ahref="javascript:void(0);"onclick="scrollByRate(500,20)">Scrolling down slowly</a></p><p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p><p>g</p><p>h</p><p>i</p><p>l</p>

Read here about static var in javascript