Inspired by the CargoCollective and David DeSandro's site, I asked my Twitter followers (@nickla) on how to do the scrollto posts with jQuery. Within a day, Ben Bodien of Neutron Creations sent back a quick demo on how to replicate the similar result with the ScrollTo plugin. The script finds your current view position and scroll to the next or previous post accordingly. Check out the demo to see what I'm talking about.

View Demo Scrollto Posts

HTML Code

Assume you are using this for your blog and each blog entry has a "post" CSS class.

<div class="post">
	content...
</div>

<div class="post">
	content...
</div>

<div class="post">
	content...
</div>

CSS: Navigation Dock

Specify position:fixed for the navigation div to prevent it from scrolling.

#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

Include the following code in the <head> tag. The first set of function will check which post you are currently viewing. When the next or prev button is clicked, it will scroll to the post accordingly.

The second function is to handle anything that's got a class of "scrolltoanchor". It will scroll to the element with an ID corresponding to that element's href attribute value. In my case, I use it for the Back to top, Comments, and Reply button.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750       
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));        
    });

    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });

});
</script>

Credits

Thanks to Neutron Creations for the ScrollTo implementation.