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.

122 Comments

Kit
Jun 21, 2010 at 9:33 am

The demo is decidedly dodgy on the iPad’s mobile safari, btw.

John Doesky
Jun 21, 2010 at 9:51 am

How come I cant get back to the ‘Previous Post’ when I’m in the comments?

Metin
Jun 21, 2010 at 10:39 am

Hey, this looks awesome! Definitely worth to try and implement.
However, the demo needs a fix. Because once “comments” or “reply” is clicked, “previous” and “next” link stop functioning. User is required to scroll up or down in order to make them working again.

Anyway, thanks for the tutorial.
cheers!

Nick La
Jun 21, 2010 at 10:49 am

@Metin – It is not a bug. Imagine it being a WP blog. The jump to Comments and Reply link should only appear in the single view.

Louis
Jun 21, 2010 at 11:23 am

Hey, Nick. This looks pretty cool, thanks for the code.

Problem is, it’s not really working in Chrome, but works fine in Firefox. I can’t image why that would happen, as I’ve never seen a major JS discrepancy in those two browsers.

Sajam
Jun 21, 2010 at 11:31 am

@Louis
“Problem is, it’s not really working in Chrome”

It’s working in Chrome. What’s problem?

Louis
Jun 21, 2010 at 11:58 am

@Sajam,

The next and previous buttons are extremely buggy in Chrome 5.0375.55 on PC here. Can only scroll to the “comments” and “reply” sections cleanly. The prev/next buttons only work temporarily at times when I do a manual scroll, then click them, but then they get buggy again.

Works perfectly in FF 3.6 and IE8.

Elizabeth Kaylene
Jun 21, 2010 at 12:54 pm

I don’t like that when I’m at the top of the page and I hit next, instead of going to the second post, it goes to the first, which I can already fully see on my screen.

Oh well. I’m not really a fan of jQuery anyway. This might come in handy someday, though. (:

kumar
Jun 21, 2010 at 1:27 pm

jQuery is killing the web- lets go back to table layouts and some decent designs- these unnecessary animated stuff on webpages is spreading all over- everyone is using it for no reason.. just because they look cool – they are already overused – please have some mercey!!!!

Calvin Tennant
Jun 21, 2010 at 2:31 pm

I started playing around with scrollto a couple weeks ago. Good fun.

Sam
Jun 21, 2010 at 2:59 pm

Interesting I had just been playing around with something similar as a proof of concept for a site. I found Ben Alman’s Back Button & Query Library helpful for keeping track of the page state with hashes.
http://benalman.com/projects/jquery-bbq-plugin/

Chris Robinson
Jun 21, 2010 at 3:41 pm

Would be cool to see keyboard controls integrated.

Markus
Jun 22, 2010 at 1:22 am

Hi,

looks and behaves nice. Keyboard controls would be great! I think we will use something like that in our next Webdesign Düsseldorf project.

Best,
Markus

Müjdat Korkmaz
Jun 22, 2010 at 9:23 am

Hi Nick. I translated this post to Turkish, and published on my blog. I hope you don’t mind. I gave original post & demo link in the post.

Thanks.

TiS
Jun 22, 2010 at 9:57 am

On Opera the second example site won’t work correctly :( but your example yes :)

In fact, first example site also uses jquery and jquery.scrollTo

I experienced problems with this plugin on my work, though. When scrolling to element, it’s important for some browsers to have block type elements. Scrolling is buggy on inline elements on Opera and maybe some other browsers. Well, makes sense :)

Craig Kirkwood
Jun 22, 2010 at 6:09 pm

Not so good on the iPad with safari…

Andrew
Jun 23, 2010 at 2:36 am

I’ve had the ScrollTo plugin going on my website for a little while now. It works great in most browsers except Safari on the iPhone and iPad. The “fixed” elements won’t stay where they should when the page scrolls.

Jocuri online
Jun 23, 2010 at 8:04 am

Very good tutorial about ScrollTo Posts With jQuery, I look forward next post

Evie
Jun 24, 2010 at 5:42 am

Firefox on PC is a little buggy, first click doesn’t do anything, and can’t go up after comments section. Otherwise, nice and smooth :)

ndrew
Jun 25, 2010 at 3:42 am

great work dude..
that’s so cool…

Ginni - Web Designer
Jun 25, 2010 at 7:34 am

Beauty! Been looking just for this one! Thanks heaps, gracias senor :)

Pablo
Jun 25, 2010 at 7:50 pm

Nice Article.

web design dubai
Jun 26, 2010 at 3:48 am

Nice article buddy.

Rebecca
Jun 26, 2010 at 11:59 am

Thanks for sharing. I have two questions, how would one attach a keyboard shortcut to this so that we could achieve J/K navigation between posts (like in ffffound)? and, could we set a variable so that we can easily change the effect’s duration?

Again, thank you very much!

san
Jun 26, 2010 at 11:30 pm

nice info..

good tutorial..

James Grubb
Jun 27, 2010 at 3:10 am

Hi Thanks for this. I’m tryig to get thisi working localy, by copying the code and linked files, but no joy. Anything I’m missing? Thanks

James
Jun 27, 2010 at 4:27 am

Appologies, forget last post. Works fine. User error

SingleBits
Jun 27, 2010 at 11:12 am

Nice article, I’ll implement this on my blog.

Sathishkumar
Jun 27, 2010 at 1:03 pm

Thanks for sharing this tutorial mate. But i have question. Can i make this work with my thesis? Bcoz i need hooks for implementing this in thesis. Help me

Melissa joyce
Jun 28, 2010 at 12:51 pm

Thanks for sharing this article …

William Li
Jun 29, 2010 at 7:55 am

Great, I may have to consider this for my site. Thanks for sharing

Lw6090
Jun 29, 2010 at 5:02 pm

really nice thx

Mikael
Jun 30, 2010 at 4:38 am

Could be useful, thanks !

Austin Pickett
Jul 1, 2010 at 9:23 am

I have used nearly the same technique within my website, seems to be the “omg hawtest 2.0 trend” it’s nifty, definitely a lot better than just jumping to anchor links. Good post though Nick.

Jason
Jul 3, 2010 at 2:56 pm

OMG I’ve been looking for something like this for a while. I noticed Windows Live used a similiar effect on their Hotmail preview page (http://windowslivepreview.com/hotmail/new/) a long time ago.. and I was wondering if anyone knew how to extend this function to make it work like Windows Live did. As you’ll see as you scroll down the page, the navigations links are highlighted as you scroll by the headings. I hope someone can help :)

Andreyco
Jul 4, 2010 at 3:30 pm

Nick, you should definitely post mode “jQuery” related posts. Since it is realy “must have” feature in these days :) Thanks for this one

Kutie
Jul 4, 2010 at 9:13 pm

Nice! Thanks for sharing…

pooja
Jul 7, 2010 at 4:18 am

Great list, thanks for sharing it! Here’s a new free blog directory that you can also add to your list:

http://www.webmediamakers.com

Evan
Jul 7, 2010 at 10:50 am

Really nice! Thanks for sharing.

VMware Hosting
Jul 8, 2010 at 12:23 am

good teacher.:D

code pixelz media
Jul 8, 2010 at 5:01 am

Nice article. Thanks for taking time to create this article.

ridwan
Jul 8, 2010 at 9:32 am

so helping me to create a nice web
thanks

wow
Jul 10, 2010 at 11:57 pm

wowowowow

this is nice! XD

doris
Jul 13, 2010 at 5:04 am

Nice! Thanks for sharing…

fajar
Jul 13, 2010 at 9:42 pm

nice article

Kojeje
Jul 16, 2010 at 12:12 am

Nice tutorial :)
Thanks for sharing us this :)

khay
Jul 16, 2010 at 1:28 pm

great post!! thanks

David Owen Morgan
Jul 17, 2010 at 9:19 am

As some commentators have noted, scrollTo works by shifting window, not scrollpane, so won’t behave out of the box on mobile Safari (iPad, iPhone…). Hoping the guys behind iScroll (http://cubiq.org/iscroll) build in scrollTo (localScroll, serialScroll) functions and customizability to get us rolling cross-platform.

ndrew
Jul 18, 2010 at 11:16 pm

it gives me a big help..

wij
Jul 19, 2010 at 12:56 am

it’s nice tutorial, thanks for share the code,
i want to learn JQuery more..

code pixelz media
Jul 19, 2010 at 5:07 am

very good. I like the way you present your content.

kai
Jul 19, 2010 at 8:05 pm

JQUERY? this is something i need…. thanks…

tedted
Jul 20, 2010 at 3:41 am

thanks for sharing

Roy
Jul 21, 2010 at 5:51 am

ok…. thanks for the information….

Tom Garceau
Jul 25, 2010 at 1:18 am

I noticed that after I clicked reply I wasn’t able to use any of the other buttons, like previous.

amit
Jul 26, 2010 at 1:17 am

great tutorial.
thanks for sharing.

David
Jul 27, 2010 at 12:09 am

Great tutorial thanks

Raubie
Jul 27, 2010 at 10:20 pm

Couldn’t get this great doohickey up and working in blogger – I got an xml error within the $(function()… code after trying to save the template. Anybody have an idea as to the glitch? Many thanks. ~ Raubie

Christopher
Aug 3, 2010 at 9:44 am

With something like this, there really should be a “First Post” button. After you click “Comments” or “Reply” you are unable to get back to the posts unless you scroll up yourself. Also, there should be a way to check if you are on the last post, and then gray out the “Next” button. I kept clicking it and nothing was working, then scrolled down and saw that I was on the last post.

Besides those two things, this is a great tutorial, thank you for your input.

Freelance Portal
Aug 8, 2010 at 10:41 am

http://www.freelanceportal.8rf.org

Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.

Cheatsheets and online tutorial.

http://www.freelanceportal.vze.com

asep daniel septianto
Aug 11, 2010 at 11:40 am

a very good description…
thanks a lot

Kaare Roager
Aug 16, 2010 at 5:48 am

Thanks for sharing. I have been looking and asking for this.

dofollow directory list
Aug 17, 2010 at 5:12 am

it’s too cool idea thanx for sharing it post. it’s helpful post to me bcz i’m webdesigner. it’s awesome

eJobsViet
Aug 17, 2010 at 5:50 am

thank for this post

love your site

grinding mill
Aug 19, 2010 at 10:38 pm

very helpful! Thanks!

Free
Sep 6, 2010 at 4:53 am

Very nice article, would You mind if I translate it to polish and publish it on my website :)?

23r9i0
Sep 13, 2010 at 1:51 pm

Hello, it’s possible to hide the prev link and activate it after clicking the link next?
And add scrollTo normal but eliminate the link’s positions ?

ospop
Sep 22, 2010 at 12:01 am

Very nice article, would You mind if I translate it to polish and publish it on my website :)?

ospop shoes shop
Sep 24, 2010 at 1:46 am

Great info. The provided demo is very useful.

Ambigel
Sep 26, 2010 at 10:58 am

Terrific

But left a “goto the begin’s” button

Thiago
Oct 4, 2010 at 7:05 pm

jquery css and gives you a power …. only have to use that for good ok

benson
Oct 7, 2010 at 9:32 pm

Just want to say what a great blog you got here!I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

Pankaj
Oct 11, 2010 at 12:29 pm

Can you please tell me how to implement this in blogger?

sutton coldfield web design
Oct 15, 2010 at 3:19 am

Easy to implement and another great tutorial.

Melvins
Oct 22, 2010 at 1:12 am

Thanks for sharing. Easy to implement and also I will apply it.

Los Angeles Web Design

Premier pixels
Nov 3, 2010 at 3:21 am

Its really understandable and good one.thanks for helping us

Joe
Nov 12, 2010 at 4:57 pm

Excellent tutorial.

How would I offset the scrolling for a fixed header, I don’t understand where to plug in the offset value.

Any help would be much appreciated. Thank you.

Yogi Prasetiya
Dec 15, 2010 at 10:28 am

thank u, now i can implement this to my blog,. really usefull for me…

Henry Peise
Dec 24, 2010 at 3:51 am

As the Apple iphone 4 bumper is taken off the marke, will white iphone 4 available soon?

Juno Mindoes
Dec 25, 2010 at 2:35 am

White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!

oky
Dec 27, 2010 at 11:01 pm

hahah… that’s great code

samson
Jan 5, 2011 at 1:37 pm

Fantastic!!! i have to try it out. nice one

samson
Jan 5, 2011 at 1:42 pm

After checking the demon again, i noticed that, when i clicked on reply it goes down, but when i click on Prev OR Next, it doesn’t go back to d top!!! any bug?

Uçak Bileti
Jan 11, 2011 at 3:43 pm

ölüyorum seni tam buldum

Ben
Jan 15, 2011 at 1:26 am

my comment got eaten.

cold.bryant
Jan 17, 2011 at 3:21 am

SEO means more than just Search Engine Optimization; it also means Start Engaging Others. But, why should you be engaging your employees, your customers, your potential customers, even your competition? To boost rankings, of course! Wielding Social Media as a tool of mass connectivity is the future of SEO.

tütüne son
Jan 29, 2011 at 5:27 pm

How would I offset the scrolling for a fixed header, I don’t understand where to plug in the offset value.

Daniel Cohen
Feb 4, 2011 at 11:39 am

I wrote a similar solution to be used with a Caspio online DataBase report page. It uses the scroll to plugin but moves automatically every few seconds. You can read about how it was put together here:
http://howto.caspio.com/?p=3759

Thanks

Raymond trangia
Feb 9, 2011 at 8:23 pm

coool men cool… just like this one

http://bit.ly/demoscss

Anna
Mar 18, 2011 at 6:15 pm

Superb

sumomax
Mar 21, 2011 at 5:39 pm

is not easy to put on weight

Ugo
Mar 27, 2011 at 7:27 am

I’m trying to implement the script into my wordpress blog with no success. Any help?

dexx
Apr 17, 2011 at 1:29 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

El garch
May 10, 2011 at 9:27 am

Good Work, thx for the post!

Mark Dunbavan
May 16, 2011 at 4:21 am

Hi Guys.

I have been working on trying to find this script for the right project and one has come along finally but as per usual with most projects its not a straight forward scrollTo page.
They want the content hidden and then when the button is clicked it loads the content with ajax from an outside html page into the container div. I know this is possible as its been implemented via these guys http://www.imagemechanics.com.au.

Is there any easier cleaner way to do this at all?

Thanks

Mark

Pablo
Jun 15, 2011 at 7:56 am

This has been highly helpful!
I have been looking for something like this for two weeks…

thanks!

Josh
Jun 15, 2011 at 10:46 am

Like the effect. However, if you’re on the comments or reply area and you try to click the previous link, it will not move to the previous post area.

orhanbt
Jul 15, 2011 at 4:30 pm

This is verry good.

parkesepeti
Jul 19, 2011 at 8:35 am

Goog job. Thanks.

Patrick
Jul 21, 2011 at 10:02 am

How can I amend the js to work with a horizontal site? This is what I trying to get it to work on http://cargocollective.com/larryleathers

jeromeM
Jul 22, 2011 at 5:07 am

Thanks for this post.
Add keyboard control would be great.

Piotr
Jul 28, 2011 at 7:44 pm

YeP!!!

Also loooking for this stuff but with keybord control!!!\\

any chance????

Greg Formager
Mar 2, 2012 at 6:09 pm

Same here. Keyboard control would be great!

Colin
Jun 24, 2012 at 7:33 pm

here’s how to add keyboard functionality to this.
http://colinelliot.posterous.com/scroll-to-posts-using-jquery-keyboard-nav

complex41
Aug 23, 2011 at 11:50 am

And then he handed you the thirty-five 45

raza
Aug 29, 2011 at 5:56 am

hey guys can you email me some html codes for background that you think will suit my website best. thanks
my website :http://www.iappleworld.webs.com/

Sidney Voelkerding
Sep 1, 2011 at 7:06 pm

Thank you a lot for giving everyone an exceptionally nice possiblity to check tips from this blog.

jingxiamnh
Sep 8, 2011 at 6:54 am

After all, what a nice web website and informative posts, I will add backlink bookmark this web site?

www
Sep 12, 2011 at 9:30 am

www

web design
Jan 27, 2012 at 6:01 am

Hah!!!
Awesome…
Many many thanx for sharing those.

David Díez
Feb 3, 2012 at 6:48 am

Ey!
I’m new on jQuery.
Two newbie questions:

1.- Where do I get the two js files?
2.- Where do I paste the function code?

Thanks

David Díez
Feb 3, 2012 at 7:16 am

Ok, I’ve got the first solved

J.T.
Feb 22, 2012 at 2:22 pm

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:

http://www.jtroll.com/projects

J.T.
Feb 22, 2012 at 4:56 pm

Whoops, never mind — the mistake was making “post” an id instead of a class. It works marvelously now. Thanks again for the post!

Josenildo Alves
Feb 26, 2012 at 7:45 pm

Nossa cara é demais essa funcionalidade procurei por isso muito tempo… e funciona mais que perfeito. Deus te abençoe.

Eiirp
Mar 7, 2012 at 4:27 am

Thanks for the nice script.

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?

Thanks a lot!

Daniel
Mar 15, 2012 at 11:47 am

Very Good Tutorial :D

Hiba
Apr 30, 2012 at 5:27 am

how can I edit the above code to make it scroll horizontally instead???

Diego Prates
May 18, 2012 at 9:23 am

Hi, I’m trying to wrap posts with a div with overflow:hidden, to hide the next posts, but the script doesn’t work. Someone can help me ?

Eve
Oct 26, 2012 at 8:40 am

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. ;)

s1
May 23, 2012 at 9:07 am

sd sd

R
May 29, 2012 at 2:52 am

Hello!
Nice tutorial! It’s the first scrollTo I did work. But it only works wit jquery 1.4.2, if I change it to last version 1.7.1 it doesn’t work! Anyone knows how to fix it?
Thank you!

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.