How could I modify this template to add butons that would scroll to the next section?

Question

I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section? Thanks in advance for your help!

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Answer 1

Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo

Answer 2

You can use scrollLeft and offset() to determine what to scroll to:

A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):

$(".next").click(function(e){
    $('html, body').animate({
        scrollLeft: $(this).closest('td').next().offset().left
    }, 1000);
    e.preventDefault();
});

I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.

If you didn't want the animation you could do it this way:

$(".next").click(function(e){
    $('html, body').scrollLeft($(this).closest('td').next().offset().left );
    e.preventDefault();
});