Scroll the div content when clicking a up or down button

Question

I want to create a div like below:

<div id="upButton">&nbsp;</div>
<div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;">
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    ...
    content number 100<br/>
</div>
<div id="downButton">&nbsp;</div>

Based on the code above, #divWithExcessiveContent's content should only be until, perhaps "content number 20" and the rest are hidden. When #downButton is clicked, the inside of the div should scroll down, displaying the content below "content number 20".

How can I do that using jQuery?

Answer 1

I've created two jsFiddles for you. Hope this is what you want to do with your item list

You can do the trick by introducing another container div and adjust the height/margin top & bottom to scroll/show next.

<div id="upButton">&nbsp;</div>
<div id="container" style="overflow: hidden;height: 40px;">
<div id="divWithExcessiveContent" >
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    content number 5<br/>
    ...
    content number 100<br/>
</div>
</div>
<br>
<div id="downButton" style="border:solid 1px;width:50px;">Button</div>

Jquery:

var i = 0;
$('div#downButton').click( function() {
    i = i - 20;
   $('div#divWithExcessiveContent').css('margin-top', i + 'px');
  });

i) Scrolling like behavior demo

http://jsfiddle.net/vendettamit/4xuV4/

ii) Expandable div to show next element demo

http://jsfiddle.net/vendettamit/kmHPk/

Answer 2

Probably this link will be helpfull for you?

It enables you to scroll element to certain posistion, e.g

$('#divWithExcessiveContent').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

Please mind that it's a plugin for jQuery, so you have to check if your jQuery has them already or not.

Hope this helps you.