0

これはうまく機能しているjsfiddleですが、実際には体全体ではなくdivのみをスクロールしたいです。これは私が試したjsfiddleですが、望ましくない結果をもたらしています。offset() を position() に変更しましたが、結果は同じです。

HTML コード: 

    <ul id="banner">
        <li> <a href="#1">1</a> 
        </li>
        <li> <a href="#2">2</a> 
        </li>
        <li> <a href="#3">3</a> 
        </li>
        <li> <a href="#4">4</a> 
        </li>
    </ul>
    <div id="wrapper">
    <div id="container">
            <div id="1" class="panel">1</div>
            <div id="2" class="panel">2</div>
            <div id="3" class="panel">3</div>
            <div id="4" class="panel">4</div>
    </div>
    </div>
</body>

CSS コード:

body {

    margin: 0 0 0 0;
}
.panel {
    width: 25%;
    height:100%;
    float:left;
    margin-top: 45px;

}
ul#banner {
    position: fixed;
    line-height: 45px;
    margin: 0 30px;
    padding: 0;
    z-index: 9;
}
ul#banner li {
    display: inline;
    z-index: 10;
}

#container {

    width: 400%;

}

#wrapper { width: 100%; overflow-x:hidden; }

Jクエリコード:

$(document).ready(function () {
    $("#banner a").bind("click", function (event) {
        event.preventDefault();
        var target = $(this).attr("href");
        $(" #wrapper").stop().animate({
            scrollLeft: $(target).offset().left,
            scrollTop: $(target).offset().top
        }, 1000);
    });
});

前もって感謝します。:)

4

1 に答える 1

1

もうすぐそこ

ラッパーではなくコンテナをアニメーション化する必要があり、ラッパーにはposition:relativecssが必要です

#wrapper { width: 100%; overflow-x:hidden; position:relative;}

と

$(document).ready(function () {
    $("#banner a").bind("click", function (event) {
        event.preventDefault();
        var target = $(this).attr("href");
        $("#container").stop().animate({
            left: $(target).offset().left,
            top: $(target).offset().top
        }, 1000);
    });
});

jsfiddleを参照してください

于 2013-04-09T06:02:23.240 に答える