I have a table of dates and times in an overflow div which on page load I'd like to auto-scroll to the first 'future' date & time in the list. I've programatically added an anchor id to the table cell that contains that date, and then been experimenting with the following Stack answers to get it to scroll on page load.
Scrolling to an anchor within a DIV on external click, via jQuery
How to scroll an item inside a scrollable div to the top
However, I can't seem to get it to work; so either I'm missing something or my code is borked.
<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;" align="right">
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #888888;">
1st Feb 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;">
14th Feb 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;">
15th Feb 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;">
15th Feb 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;">
17th Feb 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;">
18th Feb 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;">
19th Feb 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;">
20th Feb 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;">
20th Feb 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;">
21st Feb 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;">
<a id="firstfuture"></a>22nd Feb 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 id="first future" style="border-bottom:1px solid #888888;">
22nd Feb 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;">
24th Feb 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;">
25th Feb 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;">
26th Feb 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 Feb 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;">
27th Feb 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 Feb 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;">
1st Mar 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;">
1st Mar 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;">
3rd Mar 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;">
4th Mar 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;">
5th Mar 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>
</tbody>
</table>
</div>
And the JS (commented out some other attempts):
$(document).ready(function() {
$('#calendarlist').scrollTo( $('#firstfuture'));
//document.getElementById('calendarlist').scrollTop += document.getElementById('firstfuture').offsetTop - document.getElementById('calendarlist').offsetTop;
//$('#firstfuture').scrollIntoView();
})
