jQuery - 如何在单击div时使浏览器窗口水平滚动？

Question

我有一个箭头图片在一个div中。这个div固定在非常宽的页面的右下角。

如何使用jQuery使窗口在每次单击该div时向右滚动600像素？（是否可以检测页面是否无法再向右滚动，并隐藏箭头？）

干杯。

- Miguel K.

Answer 1

尝试类似以下方式实现：

尝试类似以下方式实现：

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

这里是jsfiddle: 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");
            }
        }
    );    

});

- Luke

Answer 2

使用jQuery方法scrollLeft

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

类似这样的内容 :)

- arnorhs

Answer 3

你可以使用Scrollto插件，

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

非常容易使用，只需使用文档。然后，您可以创建一个占位符来确定是否到达页面末尾。只需将占位符粘贴在最后，然后计算距离即可。

- mcbeav

---

我会尽力想出一些代码来帮助你，但我现在有点忙。 - mcbeav