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.

HTML Code

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.

This is the first tutorial I’ve found that’s actually explained quite well how to implement a next/previous post button with easing effects. However, in trying to implement it on a page of my own, I haven’t been able to get it to work. I’m sure I’m doing something wrong that’s bone-simple… could you perhaps point out to me what’s wrong on this page? Any help is appreciated:

Is it possible to get rid of the next/prev buttons and make the script scrollt to the next post by clicking on the current post. Let’s say I’m at post 5, just click on the post itself and the script scrolls to post 6?

Hi, I know you postet this quite some time ago, but if anybody is still searching for sth like that: try the “jquery.serialScroll” from Ariel Flesler. Didn’t work for me to scroll the whole website but it’s doing exactly what you want with the hidden overflow and works for horizontal and vertical scroll. ;)