jQuery - 在 div 内滚动？滚动到？

Question

我有一个包含列表的 div 容器，该列表中只有一项可见，其余项目被隐藏(容器具有溢出:隐藏)。

我希望 jQuery 在单击确切的链接后显示请求的项目:

http://jsfiddle.net/ztFWv/

有什么想法吗？ scrollTo 会帮助我吗？我尝试过这个插头，但没有成功。我不想使用 iframe。

Answer 1

ScrollTo 会有帮助，但是滚动是绝对必要的吗？我认为最好只使用 slideUp() 和 slideDown()

我稍微修改了 HTML，为幻灯片项目提供了一个类和一个 ID。

现场演示: http://jsfiddle.net/ztFWv/1/

<div id="slider">
    <ul>
        <li id="one" class="slideItem">
            <h1>Header #1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li id="two" class="slideItem">
            <h1>Header #2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li id="three" class="slideItem">
            <h1>Header #3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
</div>

        <a href="javascript:void(0);" class="one">Scroll to #1</a> 
        <a href="javascript:void(0);" class="two">Scroll to #2</a>
        <a href="javascript:void(0);" class="three">Scroll to #3</a>       

JS

$('a').click(function(){
    var linkClass=$(this).attr('class');
    $('.slideItem:visible').slideUp('fast',function(){
        $('#' + linkClass).slideDown('fast');
    });
});

更新

如果你必须滚动:)

这是一个示例:http://jsfiddle.net/ztFWv/3/

包括 scrollTo JS 文件并以这种方式使用命令。

$('a').click(function(){
    $('#slider').scrollTo( $('#' + $(this).attr('class')), 800 );
});