jQuery - scrolling inside a div? scrollTo?

Question

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).

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

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.

Answer 1

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

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

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

UPDATE

If you must have scrolling :)

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

Include the scrollTo JS file and use the command this way.

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

Answer 2

Yes, use the scrollTo jQuery plugin.

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 method as it looks more professional.

Answer 3

See these:

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

Answer 4

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.

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

Answer 5

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).

See it in action at this fiddle

The example HTML is:

<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:

#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:

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

});