2

我在其他几个里面有一个定位的 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/

我只是想不出一个好的选择（设计没有回旋余地）

Margin-top 动画意味着 div 滑过 div 的底部/顶部，我希望它在没有滚动时停止。

任何帮助都会很棒。

4

1 回答 1

4

看到这个：小提琴

$("#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();
})
于 2013-04-12T13:46:25.693 回答