logo标签列表

jQuery - 在一个div中滚动？scrollTo？

jqueryscrollto
4
我有一个包含列表的div容器，其中只有一个项目可见，其余项目被隐藏（容器具有overflow: hidden）。
我希望jQuery在点击精确链接后显示请求的项目：

http://jsfiddle.net/ztFWv/

有什么想法吗？ scrollTo 能帮助我吗？我已经尝试了这个插件，但没有成功。我宁愿不使用iframe。

5个回答
13

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 );
});
我也认为滚动应该是最后的选择，除非有一个真正好的理由去这样做。我也喜欢你写的紧凑代码。 - Neil
@Neil 滚动看起来更好 :) 我希望段落从右侧滑到左侧，而不是只是“显示出来”。确实，代码很棒。 - anonymous
3

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

虽然它不能为您提供很多控制权，但它是原生的滚动并且非常流畅。

这非常优雅。 - mch
0
今天我花了几个小时来尝试滚动等操作，并想出了一个我认为很不错的滚动框架，可以在没有滚动条的情况下进行垂直滚动，类似于这里所要求的。它可以一页一页地进行垂直滚动，也可以滚动到特定元素（例如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;
        }

});
关于这个主题，我的最终建议是： 我重新编写了上面的代码以使其更加高效。请查看http://www.jsfiddle.net/elusien/3MBxK/上的示例。 - Neil
0

是的，使用scrollTo jQuery插件。

它非常容易使用。我自己已经在几个项目中使用过了。

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

我一直在尝试使用 jQuery().scrollTo(itemClass);，但是什么都没有发生，我知道这很糟糕，但我做错了什么？:( - anonymous
你需要使用"overflow: auto"而不是"overflow: hidden"来获取滚动条，以便能够使用"scrollTo"。 - Neil
嗨，我刚刚看了Dutcjie432的新代码。这看起来真的很不错。在http://jsfiddle.net/ztFWv/5/上查看它。 - Neil
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接