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

admin管理员组

文章数量:1394534

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.

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.

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow asked Feb 21, 2011 at 0:39 Miguel K.Miguel K. 11344 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try something like this:

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

jsfiddle here: http://jsfiddle/juXLu/2/

[edit] And here's detecting if you're at the end of the document http://jsfiddle/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");
            }
        }
    );    

});

Use the jquery method scrollLeft

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

Something like that :)

You could user the Scrollto plugin,

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

It is really easy to use, just use the documentation. Then you could create a placeholder to determine whether or not its to the end of the page. Just stick the placeholder at the very end, and calculate the distance.

本文标签： javascriptjQueryHow to get browser window to scroll horizontal when div is clickedStack Overflow