How to animate scrolling with window.requestAnimationFrame();
<p><br>
I am trying to animate scrolling, and here's what I came up with:</p>

<pre><code>function autoScrollTo(el){
    var scrollY = 0;
    var distance = 2;

    var scroller = function(el){
        var currentY = window.pageYOffset;
        var targetY = document.getElementById(el).offsetTop;
        var bodyHeight = document.body.offsetHeight;
        var yPos = currentY + window.innerHeight;

        if (yPos &gt; bodyHeight){
            window.cancelRequestAnimationFrame(scroller);
        }else{
            if (currentY &lt; targetY - distance){
                scrollY = currentY + distance;
                window.scrollTo(0, scrollY);
            }else if (currentY &gt; targetY + distance){
                scrollY = currentY - distance;
                window.scrollTo(0, scrollY);
            }else{
                window.cancelRequestAnimationFrame(scroller);
            }
        }
    }
    window.requestAnimationFrame(scroller(el));
}
</code></pre>

<p>The problem is that when the method is called, it scrolls only once (2xp) and to scroll it further, I have to call the method again and again and again...<br>
Can you please, tell me what I am doing wrong?<br>
Also, how do I manually set fps?<br>
I call the function with the following html markup:</p>

<pre><code>&lt;a href="#" class="scroll" onclick="return false;" onmousedown="autoScrollTo('location');"&gt;&lt;div class="tableLink"&gt;Location&lt;/div&gt;&lt;/a&gt;
...
&lt;div id="location" class="page"&gt;location&lt;/div&gt;
</code></pre>
