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

1 4 5 6
  1. jeromeM
    Jul 22, 2011 @ 5:07 am

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

    Reply

  2. complex41
    Aug 23, 2011 @ 11:50 am

    And then he handed you the thirty-five 45

    Reply

  3. raza
    Aug 29, 2011 @ 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/

    Reply

  4. Sidney Voelkerding
    Sep 1, 2011 @ 7:06 pm

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

    Reply

  5. jingxiamnh
    Sep 8, 2011 @ 6:54 am

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

    Reply

  6. www
    Sep 12, 2011 @ 9:30 am

    www

    Reply

  7. web design
    Jan 27, 2012 @ 6:01 am

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

    Reply

  8. David Díez
    Feb 3, 2012 @ 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

    Reply

  9. J.T.
    Feb 22, 2012 @ 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

    Reply

    • J.T.
      Feb 22, 2012 @ 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!

      Reply

  10. Josenildo Alves
    Feb 26, 2012 @ 7:45 pm

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

    Reply

  11. Eiirp
    Mar 7, 2012 @ 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!

    Reply

  12. Daniel
    Mar 15, 2012 @ 11:47 am

    Very Good Tutorial :D

    Reply

  13. Hiba
    Apr 30, 2012 @ 5:27 am

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

    Reply

  14. Diego Prates
    May 18, 2012 @ 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 ?

    Reply

    • Eve
      Oct 26, 2012 @ 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. ;)

      Reply

  15. s1
    May 23, 2012 @ 9:07 am

    sd sd

    Reply

  16. R
    May 29, 2012 @ 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!

    Reply

1 4 5 6

Leave a Reply