jQuery - 单击 div 时如何让浏览器窗口水平滚动？答案

【问题标题】：jQuery - How to get browser window to scroll horizontal when div is clicked?jQuery - 单击 div 时如何让浏览器窗口水平滚动？
【发布时间】：2011-02-21 00:39:46
【问题描述】：

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

每次单击 div 时，如何使用 jQuery 将窗口向右滚动 600 像素？（是否有可能检测到页面何时不能再向右滚动，并隐藏箭头？）

干杯。

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案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");
            }
        }
    );    

});

【讨论】：

【解决方案2】：

使用jquery方法scrollLeft

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

类似的东西:)

【讨论】：

【解决方案3】：

你可以使用 Scrollto 插件，

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

它真的很容易使用，只需使用文档即可。然后你可以创建一个占位符来确定它是否到页面的末尾。把占位符贴在最后，计算距离。

【讨论】：

想出一些代码来帮助你，但我现在有点忙。