使用ScrollTo插件水平滚动div

Question

我想要实现的是让 4 个 div 在“窗口空间”内水平滚动（从左到右）。我还包含了缓动插件，当您单击“TopLinks”链接并且 div 上下移动时，它可以完美地工作...但是，当尝试从左向右滚动时，缓动完全消失。

我想知道这是否与我的 CSS 有关，但我不确定。任何帮助使其正常工作将不胜感激。这是我的代码：

HTML

<ul id="topLinks">
    <li><a href="#contact">Contact</a></li>
    ...
    <li><a href="#home">Home</a></li>
</ul>
....
<div id="slider">
    <div class="active" id="home">
    //code here
    </div>
    ...
    <div class="active" id="contact">
    //Fourth & last div
    </div>
</div>

CSS

#slider { 
    position:relative;
    width:530px;
    height:380px;
    margin:60px auto auto 0px;
    overflow:hidden;
}

div.active {
    float:left;
    text-align:justify;
    line-height:30px;
    width:530px;
    height:380px;
    margin: 0px 0px 5px 0px;
    padding:0px;
}

JAVASCRIPT

$(document).ready(function() {
    $('#topLinks li a').click(function() {
        $('#slider').scrollTo( $(this).attr('href'), 2500, {easing:'swing', axis:'x'});
    });
});

我也会把它放在 jsfiddle 上，这样你就有了一个可以工作的演示。 http://jsfiddle.net/BftMr/

Answer 1

您需要用另一个 div 包裹滑块 div 中的每个项目，该 div 跨越其包含的每个项目的宽度。 （在本例中，我将其硬编码为 3000px，但您可能希望动态计算它）

这是一个工作示例：

http:// /jsfiddle.net/NdSyB/

希望这会有所帮助，如果确实如此，请将其标记为已回答。