aligning li to the bottom of ul and being able to scroll the overflow at the same time

HTML

<a href=# id="bottom_v_align_list">bottom v align list</a><br>
<a href=# id="scrolling_list">scrolling list</a><br>
<a href=# id="both">both</a> (doesn't scroll anymore - how to fix?)<br>
<a href=# id="reset">reset</a>
<div>
    <ul>
        <li>six</li>
        <li>five</li>
        <li>four</li>
        <li>three</li>
        <li>two</li>
        <li>one</li>
    </ul>
</div>

CSS

div {
    height:200px;
    background-color: orange;
}
div.scroll {
    overflow-y: scroll;
}
.bottomalign_ul {
    position: absolute;
}
.bottomalign {
    position: relative;
}

JavaScript

$('#bottom_v_align_list').on('click', function() {
    reset();
    bottomalign();
});
$('#scrolling_list').on('click', function() {
    reset();
    scroll()
});
$('#both').on('click', function() {
    reset();
    bottomalign();
    scroll();
});
$('#reset').on('click', function() {
    reset();
});

function reset() {
    $('div').height(200);
    $('div').removeClass('scroll');
    $('div').removeClass('bottomalign');
    $('ul').removeClass('bottomalign_ul');
}
function bottomalign() {
    $('div').height(300);
    $('div').addClass('bottomalign');
    $('ul').addClass('bottomalign_ul');
}
function scroll() {
    $('div').height(100);
    $('div').addClass('scroll');
    $('div').scrollTop(200);
}