jQuery - How to get browser window to scroll horizontal when div is clicked?

Question

I have picture of an arrow in a div. This div is fixed in the bottom right corner of very wide page.

How can I use jQuery to scroll the window right 600px each time the div is clicked? (And is it possible to detect when the page can no longer scroll right, and hide the arrow?)

Cheers.

Answer 1

Try something like this:

var distance = 600;
$("div").click(function() {
    $("html:not(:animated), body:not(:animated)").animate(
        {scrollLeft: "+="+distance}, 400
    );
});

jsfiddle here: http://jsfiddle.net/juXLu/2/

[edit] And here's detecting if you're at the end of the document http://jsfiddle.net/lukemartin/juXLu/5/

var distance = 600,
    docWidth = $(document).width(),
    scrollPos;

// click handler
$("div").click(function() {

    // animate 
    $("html:not(:animated), body:not(:animated)").animate(
        // amount to scroll
        {scrollLeft: "+=" + distance},
        // scroll speed (ms)
        400,
        // callback function
        function(){
            // check our scroll position
            scrollPos = $(window).width() + $(window).scrollLeft(); 
            // if it equals the doc width, we're at the end
            if(docWidth === scrollPos) {
                $("div").text("End of the line");
            }
        }
    );    

});

Answer 2

Use the jquery method scrollLeft

$(document).ready(function(){
    $(window).scrollLeft((Number($(window).scrollLeft())+600)+'px');
});

Something like that :)