jquery - 大图滚动

Question

我有一个 HTML 页面，其居中的 div 宽度为 780 像素，高度为 8400 像素。此 div 上设置了背景图像。现在我有一个滚动条可以垂直向下滚动，这很好。我想保持这种状态。但我也有两个按钮(上一个和下一个)。当我单击下一步时，我希望我的容器向下滚动 1200 像素，当我按上一步时，我希望我的容器向上滚动 1200 像素。但后来我的滚动条缩小了。而且我还可以继续按下一个上一个按钮，即使图像不再可用...

这是我的代码 JQUERY:

$(document).ready(function (e) {
    $(".scrolling_prev").click(function () {
        $(".scrolling").animate({ "top": "+=1200px" }, 800);
    });
    $(".scrolling_next").click(function () {
        $(".scrolling").animate({ top: "-=1200px" }, 800);
    });
});

这是我的标记:

    <div class="centerSite">
        <div class="siteContainer">
            <nav></nav>
            <div class="content">
                <div class="scrolling"></div>
                <div class="scrolling_prev"></div>
                <div class="scrolling_next"></div>
            </div>
            <footer></footer>
        </div>
    </div>

有人可以帮忙吗？

Answer 1

你看错了属性，top 只会移动你的图像而不滚动它，如果你想滚动它，使用 scrollTop

http://jsfiddle.net/dxMTX/11/

$('#prev').click(function() {
    $('#outer').animate({'scrollTop':'-=1200'});
});
$('#next').click(function() {
    $('#outer').animate({'scrollTop':'+=1200'});
});