Scrolling inner-div

by hotbelgo

HTML

<div class="first">
    <button type="button" name='0'>0</button>
    <button type="button" name='1'>1</button>
    <button type="button" name='2'>2</button>
</div>
<div class="nest">
    <div class="resto resto0">Resto 0</div>
    <div class="resto resto1">Resto 1</div>
    <div class="resto resto2">Resto 2</div>
</div>

CSS

html, body {
    height: 100%;    
}
.first {
    width: 100%;
    height: 120px;
    background: rgba(150, 150, 150, .5)
}
.nest {
    background-color:#f76700;
    min-height:200px;
    overflow-y:scroll;
}
.resto {
    width: 95%;
}
.resto0 {
    height: 1000px;
    background: #999;
}
.resto1 {
    height: 900px;
    background: #eee;
}
.resto2 {
    height: 800px;
    background: #eee;
}

JavaScript

q = $('div.nest').parent().height()
console.log(q);
$('div.nest').height(q-120-16);

$("button").click(function (e) {
    //console.log(this.name);
    e = this.name;
    $('div.nest').animate({
        scrollTop: $(".resto" + e).position().top - $('div.nest').position().top + $('div.nest').scrollTop()
    },
        'slow');
});