jquery - 使用按钮 jQuery 滚动定位 div

Question

我在其他几个 div 中放置了一个定位 div(出于设计目的而嵌套)，并且想要一些按钮来控制滚动位置

这是 HTML 布局

    <div class="outer">
        <div class="inner">
            <div class="inner-lines">
                <div class="content">
                    <p>CONTENT HERE</p>
                </div>
            </div>
        </div>
    </div>    


     <div id = "up-down-nav">
        <a class="up-button" href="#">Up</a>
    <a class="down-button" href="#">Down</a>
 </div> 

和代码

    var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$(".down-button").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $(".content").animate({
        "margin-top" : "-=" + step + "px"
    });
});


$(".up-button").bind("click", function(event) {
    event.preventDefault();
    $(".content").animate({
        "margin-top" : "+=" + step + "px"
    });
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $(".content").animate({
        "margin-top" : amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

我知道这不起作用，因为 ScrollTop 与文档的滚动相关，但文档不会滚动，因为所有内容都已定位。

http://jsfiddle.net/s5mgX/1336/

我只是想不出一个好的替代方案(设计没有回旋余地)

页边距动画意味着 div 滚动超过 div 的底部/顶部，我希望它在没有剩余滚动时停止。

任何帮助都会很棒。

Answer 1

请参阅: Fiddle

$("#scrollUp").on("click", function (event) {
    // Animates the scrollTop property by the specified
    // step.
    $(".inner-lines").animate({
        scrollTop: "-=" + step + "px"
    });
     event.preventDefault();
})

$("#scrollDown").on("click", function (event) {
    $(".inner-lines").animate({
        scrollTop: "+=" + step + "px"
    });
     event.preventDefault();
})