Animate scroll to next/prev post
<p>How can I create two buttons ("next" and "prev") that will scroll the browser to the article's title? </p>

<pre><code>&lt;div id="cycle-posts"&gt;
    &lt;a id="next" href="#next"&gt;&lt;/a&gt;
    &lt;a id="prev" href="#prev"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;article&gt;My first post&lt;/article&gt;
&lt;article&gt;My second post&lt;/article&gt;
&lt;article&gt;My third post&lt;/article&gt;
&lt;article&gt;My fourth post&lt;/article&gt;
</code></pre>

<p>If it's relevant: after the first few, my articles are loaded in using "infinite scroll".</p>

<p>This is what I got so far, but it's not even close:</p>

<pre><code>$('#cycle-posts a').bind('click', function (e) {
    $articles = $('article');
    e.preventDefault();
    var totalArticles = $articles.length;


    if ($(this).attr("id") == "next") {
        new_index = ++current_index;
    } else if ($(this).attr("id") == "prev") {
        new_index = --current_index;
    }

    if (new_index &gt; totalArticles) {
        new_index = 0;
    }   

    $articles.removeClass('current').eq(new_index).addClass('current');

    console.log(new_index+' / '+totalArticles);

    // now scroll offset, find offset based on .current?

});
</code></pre>
