我在溢出div中有一个日期和时间表，在页面加载时我想自动滚动到第一个＆＃39; future＆＃39;日期和列表中的时间。我以编程方式将锚点ID添加到包含该日期的表格单元格中，然后尝试使用以下“堆栈”答案以使其在页面加载时滚动。
Scrolling to an anchor within a DIV on external click, via jQuery
How to scroll an item inside a scrollable div to the top
然而，我似乎无法让它发挥作用;所以要么我错过了某些东西，要么我的代码被剔除了。
<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>
JS（注释了其他一些尝试）：
$(document).ready(function() {
$('#calendarlist').scrollTo( $('#firstfuture'));
//document.getElementById('calendarlist').scrollTop += document.getElementById('firstfuture').offsetTop - document.getElementById('calendarlist').offsetTop;
//$('#firstfuture').scrollIntoView();
})