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.
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>
Specify position:fixed for the navigation div to prevent it from scrolling.
#nav-dock {
position: fixed;
right: 15px;
top: 35%;
}
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>
Thanks to Neutron Creations for the ScrollTo implementation.
Kit
The demo is decidedly dodgy on the iPad’s mobile safari, btw.
John Doesky
How come I cant get back to the ‘Previous Post’ when I’m in the comments?
Metin
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
@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
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
@Louis
“Problem is, it’s not really working in Chrome”
It’s working in Chrome. What’s problem?
Louis
@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
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
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
I started playing around with scrollto a couple weeks ago. Good fun.
Sam
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
Would be cool to see keyboard controls integrated.
Markus
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
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
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
Not so good on the iPad with safari…
Andrew
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
Very good tutorial about ScrollTo Posts With jQuery, I look forward next post
Evie
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
great work dude..
that’s so cool…
Ginni - Web Designer
Beauty! Been looking just for this one! Thanks heaps, gracias senor :)
Pablo
Nice Article.
web design dubai
Nice article buddy.
Rebecca
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
nice info..
good tutorial..
James Grubb
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
Appologies, forget last post. Works fine. User error
SingleBits
Nice article, I’ll implement this on my blog.
Sathishkumar
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
Thanks for sharing this article …
William Li
Great, I may have to consider this for my site. Thanks for sharing
Lw6090
really nice thx
Mikael
Could be useful, thanks !
Austin Pickett
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
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
Nick, you should definitely post mode “jQuery” related posts. Since it is realy “must have” feature in these days :) Thanks for this one
Kutie
Nice! Thanks for sharing…
pooja
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
Really nice! Thanks for sharing.
VMware Hosting
good teacher.:D
code pixelz media
Nice article. Thanks for taking time to create this article.
ridwan
so helping me to create a nice web
thanks
wow
wowowowow
this is nice! XD
doris
Nice! Thanks for sharing…
fajar
nice article
Kojeje
Nice tutorial :)
Thanks for sharing us this :)
khay
great post!! thanks
David Owen Morgan
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
it gives me a big help..
wij
it’s nice tutorial, thanks for share the code,
i want to learn JQuery more..
code pixelz media
very good. I like the way you present your content.
kai
JQUERY? this is something i need…. thanks…
tedted
thanks for sharing
Roy
ok…. thanks for the information….
Tom Garceau
I noticed that after I clicked reply I wasn’t able to use any of the other buttons, like previous.
amit
great tutorial.
thanks for sharing.
David
Great tutorial thanks
Raubie
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
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
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
a very good description…
thanks a lot
Kaare Roager
Thanks for sharing. I have been looking and asking for this.
dofollow directory list
it’s too cool idea thanx for sharing it post. it’s helpful post to me bcz i’m webdesigner. it’s awesome
eJobsViet
thank for this post
love your site
grinding mill
very helpful! Thanks!
Free
Very nice article, would You mind if I translate it to polish and publish it on my website :)?
23r9i0
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
Very nice article, would You mind if I translate it to polish and publish it on my website :)?
ospop shoes shop
Great info. The provided demo is very useful.
Ambigel
Terrific
But left a “goto the begin’s” button
Thiago
jquery css and gives you a power …. only have to use that for good ok
benson
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
Can you please tell me how to implement this in blogger?
sutton coldfield web design
Easy to implement and another great tutorial.
Melvins
Thanks for sharing. Easy to implement and also I will apply it.
Los Angeles Web Design
Premier pixels
Its really understandable and good one.thanks for helping us
Joe
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
thank u, now i can implement this to my blog,. really usefull for me…
Henry Peise
As the Apple iphone 4 bumper is taken off the marke, will white iphone 4 available soon?
Juno Mindoes
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
hahah… that’s great code
samson
Fantastic!!! i have to try it out. nice one
samson
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
ölüyorum seni tam buldum
Ben
my comment got eaten.
cold.bryant
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
How would I offset the scrolling for a fixed header, I don’t understand where to plug in the offset value.
Daniel Cohen
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
coool men cool… just like this one
http://bit.ly/demoscss
Anna
Superb
sumomax
is not easy to put on weight
Ugo
I’m trying to implement the script into my wordpress blog with no success. Any help?
dexx
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
Good Work, thx for the post!
Mark Dunbavan
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
This has been highly helpful!
I have been looking for something like this for two weeks…
thanks!
Josh
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
This is verry good.
parkesepeti
Goog job. Thanks.
Patrick
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
Thanks for this post.
Add keyboard control would be great.
Piotr
YeP!!!
Also loooking for this stuff but with keybord control!!!\\
any chance????
Greg Formager
Same here. Keyboard control would be great!
Colin
here’s how to add keyboard functionality to this.
http://colinelliot.posterous.com/scroll-to-posts-using-jquery-keyboard-nav
complex41
And then he handed you the thirty-five 45
raza
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
Thank you a lot for giving everyone an exceptionally nice possiblity to check tips from this blog.
jingxiamnh
After all, what a nice web website and informative posts, I will add backlink bookmark this web site?
www
www
web design
Hah!!!
Awesome…
Many many thanx for sharing those.
David Díez
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
Ok, I’ve got the first solved
J.T.
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.
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
Nossa cara é demais essa funcionalidade procurei por isso muito tempo… e funciona mais que perfeito. Deus te abençoe.
Eiirp
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
Very Good Tutorial :D
Hiba
how can I edit the above code to make it scroll horizontally instead???
Diego Prates
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
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
sd sd
R
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!