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; }

jQuery代码：

$(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:relative在其 css中包含

#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 回答