JQuery - How do I get a browser window to scroll horizontally when I click a div?

Question

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

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

Greetings.

Answer 1

Use jquery scrollLeft method

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

Something like that:)

Answer 2

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/

[] , , 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 3

You can use the Scrollto plugin,

http://plugins.jquery.com/project/ScrollTo

It is very easy to use, just use the documentation. You can then create a placeholder to determine if it will be up to the end of the page. Just insert the placeholder at the very end and calculate the distance.