HTML の overflow で表示しているテーブルの指定した行へスクロールさせる

dev design

こんな感じでいいのかな……
firefox 2.0.0.3 と IE6.0 だけ動作確認

<html>
<head>
<script language="JavaScript" type="text/javascript">
function onSelectionChanged(selection) {
	target = document.getElementById(selection.value);
	if (target == null) {
		return ;
	}
	scrollArea = document.getElementById("scrollArea");
	scrollArea.scrollTop = target.offsetTop;
}
</script>
</head>
<body>
<form name="fm" action="#" method="get">

<select name="selection" onchange="onSelectionChanged(this);">
<option value="top">先頭</option>
<option value="select1">選択1</option>
<option value="select2">選択2</option>
<option value="select3">選択3</option>
<option value="bottom">最後</option>
</select>

<div style="height:100px; width:100px; overflow-y:scroll;overflow-x:scroll;" id="scrollArea">
	<table width="100%">
		<tr id="top"><th>先頭</th></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr id="select1"><td>選択1</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr id="select2"><td>選択2</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr id="select3"><td>選択3</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr><td>test</td></tr>
		<tr id="bottom"><td>test</td></tr>
	</table>
</div>

</form>
</html>