JSFiddle - React, Tailwind, and code Playground
HTML
<div id="calendarlist" style="max-height:100px;overflow:auto;margin-top:10px;border:1px solid #888888;">
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tbody>
<tr>
<td style="border-bottom:1px solid #888888;">
25th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
27th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
28th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
29th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
30th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
2:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
30th Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
31st Jan 2014
</td>
<td style="border-bottom:1px solid #888888;">
7:30pm
</td>
<td style="border-bottom:1px solid #888888;padding-right:4px;"...
JavaScript
$(document).ready(function() {
$('#calendarlist').scrollTo( $('#firstfuture'));
//document.getElementById('calendarlist').scrollTop += document.getElementById('firstfuture').offsetTop - document.getElementById('calendarlist').offsetTop;
//$('#firstfuture').scrollIntoView();
})