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

Question

我有一个包含列表的 div 容器，该列表中只有一项是可见的，其余的被隐藏（容器有溢出：隐藏）。

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

http://jsfiddle.net/ztFWv/

有什么想法吗？请问scrollTo可以帮我吗？我试过这个插头，但没有运气。我宁愿不使用 iframe。

Answer 1

今天我已经玩了几个小时的滚动等，并提出了一个我认为没有滚动条的简洁框架，类似于这里所要求的。它会进行垂直滚动，一次滚动一个“页面”或滚动到特定元素（例如 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"   >&gt;</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">&lt;</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;
        }

});

Answer 2

是的，使用scrollTo jQuery plugin。

这是一个轻而易举的使用。我自己在几个项目中都使用过它。

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

Answer 3

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

它不会给你很多控制，但它是原生滚动并且非常流畅。

Answer 4

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 5

查看这些：

How to scroll the window using JQuery $.scrollTo() function