JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="news_archive">
    <li class="active">
        <a data-id="dec_2014" href="#">December</a>
    </li>
    <li>
        <a data-id="nov_2014" href="#">November</a>
    </li>
    <li>
        <a data-id="oct_2014" href="#">October</a>
    </li>
</ul>

<div class="news_window">
    <div class="wrapper">
        <div id="dec_2014">
            <p>December Content</p>
        </div>
        <div id="nov_2014">
            <p>November Content</p>
        </div>
        <div id="oct_2014">
            <p>October Content</p>
        </div>
    </div>
</div>

CSS

li.active a { color: red; }

.news_window {
    height: 200px;
    border: 1px solid black;
    overflow-y: scroll;
}


.news_window > div.wrapper {
    position: relative;
}

.news_window > div.wrapper > div {
    height: 300px;
    width: 100%;
}

#dec_2014 { background: red; }
#nov_2014 { background: green; }
#oct_2014 { background: blue; }

JavaScript

$('.news_archive li a').click(function(e) {
    e.preventDefault();
     
    var newsWindowEl = $('#'+$(this).data('id'));
     
    $('.news_window').animate({
        scrollTop: newsWindowEl.position().top
    }, 'slow');
     
    $('.news_archive li.active').removeClass('active');
    $(this).parents('li').addClass('active');
 });