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

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?

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

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

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();
});