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.

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

Solution 2

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.

Comments

[Neil]

I too think scrolling should be a last resort, unless there is a really good reason to do it. I like the compact code you wrote too.

[anonymous]

@Neil scrolling just looks BETTER :) I want the paragraphs to slide from right side to left, no to just "show up". Indeed code rocks.

[anonymous]

I've been trying with jQuery().scrollTo(itemClass); and nothing, I know that's doodle but what I do wrong? :(

[Neil]

Hi, you need "overflow: auto" instead of "overflow: hidden" to get scroll bars and so be able to use "scrollTo".

[Neil]

Hi, I just looked at Dutcjie432's new code. This looks really neat. See it at jsfiddle.net/ztFWv/5

[Neil]

My final word on the subject. I redid the above code to make it more efficient. See the working example at jsfiddle.net/elusien/3MBxK

[mch]

this is very elegant.