Jun 21
ScrollTo Posts With jQuery
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
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.
Cultural Considerations for Global Websites CSS3 Rounded Image With jQuery
Comments
Pages: 7 6 5 4 3 2 1 » Show All
There are 65 comments (+Add)
Pages: 7 6 5 4 3 2 1 » Show All
Loading ...
65 grinding mill http://www.grindingmillplant.com
August 19th, 2010 at 10:38 pm
very helpful! Thanks!
64 eJobsViet http://ejobsviet.com
August 17th, 2010 at 5:50 am
thank for this post
love your site
63 dofollow directory list http://rosanvaishnav.blogspot.com/
August 17th, 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
62 Kaare Roager http://68design.dk
August 16th, 2010 at 5:48 am
Thanks for sharing. I have been looking and asking for this.
61 asep daniel septianto http://www.bungabandung.com
August 11th, 2010 at 11:40 am
a very good description…
thanks a lot
60 Freelance Portal http://freelanceportal.8rf.org
August 8th, 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
59 Christopher http://www.northchapel.net
August 3rd, 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.
58 Raubie
July 27th, 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
57 David http://www.wvector.com
July 27th, 2010 at 12:09 am
Great tutorial thanks
56 amit http://www.fatbit.com
July 26th, 2010 at 1:17 am
great tutorial.
thanks for sharing.