jQuery - 在div中滚动？scrollTo？

Question

我有一个带有列表的div容器,这个列表中只有一个项目一次可见,其余项目被隐藏(容器有溢出:隐藏).

我希望jQuery在点击完全链接后显示所请求的项目:

http://jsfiddle.net/ztFWv/

有任何想法吗？请问滚动来帮助我吗？我试过这个插头但没有运气.我宁愿不使用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');
    });
});

UPDATE

如果你必须滚动:)

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

包含scrollTo JS文件并以这种方式使用命令.

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