Question

我有一个HTML页面，其中心div为780px宽度和8400px高度。在此div上设置了背景图像。现在我有一个向上滚动的滚动条，这很好。我想保持这种方式。但我也有两个按钮（上一个和下一个）。当我点击下一步我希望我的容器向下滚动1200px，当我按前一步我希望我的容器向上滚动1200px。但随后我的滚动条缩小了。我也可以继续按下下一个上一个按钮，如果图像不再可用...

这是我的代码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'});
});

大图像滚动

1 个答案: