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

Answer 2

我最喜欢的方法是向标签添加 tabindex="0" 属性，然后在元素上调用 focus() ，这将使浏览器将其滚动到看法。

它并没有给你太多的控制权，但它是原生滚动并且非常流畅。

Answer 3

请参阅这些：

如何使用 JQuery $.scrollTo( ) 函数

Answer 4

是的，使用 scrollTo jQuery 插件。

使用起来很简单。我自己已经在几个项目中使用过它。

还有其他方法，例如 TABS 或隐藏和显示 div，带或不带动画。我更喜欢这种方法，因为它看起来更专业。

Answer 5

我今天已经玩了几个小时的滚动等，并想出了一个我认为是没有滚动条的简洁滚动框架，类似于这里所要求的。它进行垂直滚动，一次滚动一个“页面”或滚动到特定元素（例如 DIV）。它还可以水平滚动，一次滚动一页或滚动到特定元素（例如 SPAN）。

在 this fiddle 中查看它的实际效果

HTML 示例是：

<p>
    <h1>Vertical scrolling</h1>
    <button class="shift up"       value="updown"    >^</button>
    <button class="shift vertical" value="updown  Av">A</button> <button class="shift vertical" value="updown Bv">B</button>
    <div id="updown">
        <div id="Av"> AAAAAAA text AAAAAAA </div>
        <div id="Bv"> BBBBBBB text BBBBBBB </div>
        <div id="Cv"> CCCCCCC text CCCCCCC </div>
        <div id="Mv"> MMMMMMM text MMMMMMM </div>
    </div>
    <button class="shift down"     value="updown"    >v</button>
    <button class="shift vertical" value="updown  Cv">C</button> <button class="shift vertical" value="updown Mv">M</button>
</p>

<p>
    <h1>Horizontal scrolling</h1>
    <button class="shift right"      value="leftright"   >></button>
    <button class="shift horizontal" value="leftright  Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button>
    <div id="leftright">
        <span id="Ah"> AAAAAAA text AAAAAAA </span>
        <span id="Bh"> BBBBBBB text BBBBBBB </span>
        <span id="Ch"> CCCCCCC text CCCCCCC </span>
        <span id="Mh"> MMMMMMM text MMMMMMM </span>
    </div>
    <button class="shift left"       value="leftright"><</button>
    <button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button>
</p>

CSS 是：

#updown, #leftright{
    position: relative;  
    overflow: hidden;    
    line-height: 1.5em;
    height: 1.5em;
    width: 20em;
    border: 2px solid #000;
}
#updown div {
    position: absolute;
    height: 1.5em;
    width: 20em;
    margin: 0;
    padding: 0;
    border: 0;
}
#leftright span {
    position: absolute;
    display: inline;
    float: left;
    height: 1.5em;
    width: 20em;
    margin: 0;
    padding: 0;
    border: 0;

}

javascript 是：

//  See it in action at http://jsfiddle.net/Q7FFN/

    $('#updown div').each(function(i){      // position the "divs"
        var $this = $(this);
        var amount = $this.parent().height();
        $this.css({top: i * amount});
    });     
    $('#leftright span').each(function(i){      // position the "spans"
        var $this = $(this);
        var amount = $this.parent().width();
        $this.css({left: i * amount});
    });     

    $('.shift').click(function(){
        var $this   = $(this);
        var value   = $this.attr('value');
        var values  = value.split(/ +/);
        var items   = '#' + values[0];
        var item    = (values.length == 2) ? '#' + values[1] : '';
        var classes = $this.attr('class');

        if (classes.match(/\bup\b/))               {    // up - Use "match" instead of hasClass() for performance
            var amount =$(items).height();
            $(items).children().animate({top:  '-=' + amount}, 'slow');
        } else if (classes.match(/\bdown\b/))      {    // down      
            var amount =$(items).height();
            $(items).children().animate({top:  '+=' + amount}, 'slow');
        } else if (classes.match(/\bleft\b/))       {   // left
            var amount = $(items).width();
            $(items).children().animate({left: '-=' + amount}, 'slow');
        } else if (classes.match(/\bright\b/))      {   // right
            var amount = $(items).width();
            $(items).children().animate({left: '+=' + amount}, 'slow');
        } else if (classes.match(/\bvertical\b/))   {   // vertical
            var amount = $(item).css('top');
            console.log("amount=", amount);
            $(items).children().animate({top:  '-=' + amount}, 'slow');
        } else if (classes.match(/\bhorizontal\b/)) {   // horizontal
            var amount = $(item).css('left');
            $(items).children().animate({left: '-=' + amount}, 'slow');
        } else {
            return false;
        }

});