Scroll the div content when clicking a up or down button

This question already has an answer here:

jQuery scroll to element 24 answers

---

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/

---

Probably this link will be helpfull for you?

It enables you to scroll element to certain posistion, eg

$('#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.

链接地址: http://www.djcxy.com/p/23082.html

上一篇: jQuery平滑滚动到任何锚点

下一篇: 点击向上或向下按钮时滚动div内容