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

<强>更新

如果你必须滚动:)

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

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

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

Answer 2

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

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

Answer 3

是的，请使用scrollTo jQuery plugin。

使用它是一个轻而易举的事。我自己用它来做几个项目。

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

Answer 4

见这些：

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

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"   >&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;
        }

});

jQuery - 在div中滚动？ scrollTo？

5 个答案: