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

jQuery - scrolling inside a div? scrollTo?

提问by anonymous

I have a div container with list in it, only one item of this list is visible at once and the rest is being hidden (the container has overflow: hidden).

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

I want jQuery to show the requested items after clicking exact links:

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

http://jsfiddle.net/ztFWv/

http://jsfiddle.net/ztFWv/

Any ideas? Will scrollTo help me? I've tried this plug but no luck. I'd rather not use an iframe.

有任何想法吗？会滚动帮助我吗？我试过这个插件，但没有运气。我宁愿不使用 iframe。

回答by Dutchie432

ScrollTo would help, but is scrolling absolutely required? I think it's even better to just use slideUp()and slideDown()

ScrollTo 会有所帮助，但是绝对需要滚动吗？我认为最好只使用slideUp()和slideDown()

I modified the HTML just a bit to give the slide items a class and an id.

我稍微修改了 HTML 以给幻灯片项目一个类和一个 id。

Live Demo:http://jsfiddle.net/ztFWv/1/

现场演示：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

JS

$('a').click(function(){
    var linkClass=$(this).attr('class');
    $('.slideItem:visible').slideUp('fast',function(){
        $('#' + linkClass).slideDown('fast');
    });
});

UPDATE

更新

If you must have scrolling :)

如果您必须滚动:)

Here is a sample: http://jsfiddle.net/ztFWv/3/

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

Include the scrollToJS file and use the command this way.

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

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

回答by Martin Jespersen

My favorite way to do this, is to add tabindex="0"attribute to the tag and then call focus()on the element which will make the browser scroll it into view.

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

It doesn't give you alot of control but it's native scrolling and very smooth.

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

回答by Neil

I've been playing around with scrolling etc. for several hours today and have come up with what I think is a neat framework for scrolling without scrollbars, similar to what was asked for here. It does vertical scrolling, either a "page" at a time or to a specific element (e.g. a DIV). It also does horizontal scrolling, either a page at a time or to a specific element (e.g. a SPAN).

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

See it in action at this fiddle

在这个小提琴上看到它的作用

The example HTML is:

示例 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>

The CSS is:

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;

}

The javascript is:

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

});

回答by Neil

Yes, use the scrollTo jQuery plugin.

是的，使用scrollTo jQuery 插件。

It's a doddle to use. I've used it myself for several projects.

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

There are other ways, such as TABS or hiding and showing divs, with or without animation. I prefer this methodas it looks more professional.

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

回答by Harold Sota

See these:

看到这些：

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

如何使用 JQuery $.scrollTo() 函数滚动窗口