JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="news_archive">
  <li class="active"><a href="#2014_dec">December</a></li>
  <li><a href="#2014_nov">November</a></li>
  <li><a href="#2014_oct">October</a></li>
</ul>

<div class="news_window">
  <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>

CSS

.active a {
  color: green;
}

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

#dec_2014 {
   background: red;
   height: 300px;
   display: block;
   float: left;
   width: 100%;
}

#nov_2014 {
   background: green;
   height: 300px;
   display: block;
   float: left;
   width: 100%;
}

#oct_2014 {
   background: blue;
   height: 300px;
   display: block;
   float: left;
   width: 100%;
}

JavaScript

$(".news_archive li").click(function(e){
		 e.preventDefault();
		 $('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
		 $('.news_archive li.active').removeClass('active');
	     $(this).addClass('active');
 });