2

他のいくつかの 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 の下部/上部を超えてスクロールすることを意味し、スクロールが残っていないときに停止したい。

どんな助けでも素晴らしいでしょう。

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 に答える