jQuery - 如何在單擊div時讓瀏覽器窗口滾動水平？

Question

我有div中的箭頭圖片。 這個div固定在非常寬的頁面的右下角。

如何在每次單擊div時使用jQuery將窗口向右滾動600px？ （並且可以檢測頁面何時無法向右滾動，並隱藏箭頭？）

干杯。

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");
            }
        }
    );    

});

Answer 2

使用jquery方法scrollLeft

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

這樣的東西:)

Answer 3

您可以使用Scrollto插件，

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

它非常易於使用，只需使用文檔即可。 然后，您可以創建一個占位符，以確定它是否到頁面的末尾。 只需將占位符粘貼在最后，然后計算距離。