Scroll inside Div

by Marius Jopen

HTML

<div class="box">
<div class="up">
UP
</div>
<div class="inside">
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
</div>
<div class="down">
DOWN
</div>
</div>

<div class="box">
<div class="up">
UP
</div>
<div class="inside">
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
</div>
<div class="down">
DOWN
</div>
</div>

CSS

.box {
  background: yellow;
  margin-bottom: 20px;
}

.inside {
  height: 100px;
  background: red;
  color: white;
  overflow: scroll;
}

JavaScript

$(".down").click(function() {
	$(this).parent().children(".inside").animate({ 
  scrollTop: $('.inside').prop("scrollHeight")}, 100);
});

$(".up").click(function() {
	$(this).parent().children(".inside").animate({
        scrollTop: 00
    }, 100);
});