指定した箇所へスクロールさせたい

質問

お世話になります。

a.htmlの中のテーブルのセル内に、テキストを入れてあります。このセルにだけ縦スクロールバーをつけてあります。下記ソースの<div class="scrlbox">の部分です。
別ページのb.htmlにあるリンクをクリックした時、a.htmlを子画面で開いて、なおかつテーブルのセル内の指定した行まで自動でスクロールダウン/アップするということは可能でしょうか？
（window.scroll()なかんじではなく、セル内"だけ"がスクロールするイメージです。）

a.htmlとb.htmlの連携部分はあまり気にせず、テーブルのセル内のテキストだけを任意の場所へスクロールさせることが可能かどうか、説明がややこしいですが、ご教授、よろしくお願いいたします。

----------------------- a.html -----------------------
<table border="1" width="450" height="420" bgcolor="#9999ff">
　<tr>
　　<td width="15" height="350">&nbsp;</td>
　　<td width="420" height="350">
　　　<div class="scrlbox">
　　　　★みだしその１<br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　　<br/><br/>
　　　　★みだしその２<br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　　★みだしその３<br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　</div>
　　</td>
　　<td width="15" height="350">&nbsp;</td>
　</tr>
　<tr><td colspan="3" align="center">footer</td></tr>
</table>

回答No.2

leap_day

こんにちは

【a.html】
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
//-->
</style>

<script language="javascript">
<!--
window.onload=function() {
url = location.href;
location.href=url;
}
//-->
</script>

<table border="1" width="450" height="420" bgcolor="#9999ff">
<tr>
<td width="15" height="350">&nbsp;</td>
<td width="420" height="350" >
<div style="height:350px;overflow:auto;">
<a name="scroll1">
　　　　★みだしその１</a><br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>

<a name="scroll2">
　★みだしその２<a><br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>
<a name="scroll3">
　　　　★みだしその３</a><br/>
　　　　ああああああ(長めのテキストが入ります)・・・
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>
　　　　<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
<td width="15" height="350">&nbsp;</td>
</tr>
<tr><td colspan="3" align="center">footer</td></tr>
</table>

【b.html】
<script language="javascript">
<!--
function openwin(n) {
subWin = window.open("a.html#"+n+"","Win","width=450,height=420,top=200px,left=200px");
}
//-->
</script>

<a href="b.html" onClick="openwin('scroll1')">見出し1</a>
<a href="b.html" onClick="openwin('scroll2')">見出し2</a>
<a href="b.html" onClick="openwin('scroll3')">見出し3</a>

IE,FirefoxではすんなりいったのですがOperaでは子画面を一度更新しないとアンカーに飛ばなかったのでwindow.onloadをつけてます（＾＾）
あと<tr><td>間</td><td>間にはあまりスペースなどを置かないようにしましょう。表外のものと認識されて表の上に吐き出されてしまいますので・・・
サンプルをコピペして表示すると表の上に数行空白行が表示されました（＞＜）

お礼

leap_dayさん、ありがとうございました。
そのような方法もあるのですね。勉強になりました。

回答No.1

is_may

<script language="javascript"><!--
function xMoveto(id){
for (i=0;i<document.anchors.length;i++) {
if(id && document.anchors[i].name==id){
spt=document.anchors[i].offsetTop;
}
}
document.getElementById("pos").style.top=0;
pos.focus();
document.getElementById("pos").style.top=spt+330;
pos.focus();
}
-->
</script>
<table border="1">
<tbody>
<tr>
<td><input type="button" value="見出しその1" onclick="xMoveto('sono1')"><input type="button" value="見出しその2" onclick="xMoveto('sono2')"><input type="button" value="見出しその3" onclick="xMoveto('sono3')"></td>
</tr>
<tr>
<td width="420" height="350" valign="top">　　　
<div class="scrlbox" style="height:350px;">
<div id="pos" style="position:absolute;top:350px;left:0px;">&nbsp;</div>
<a name="sono1">★みだしその１</a><br>
あああああ・・・<br>
<br>
<a name="sono2">★みだしその２</a><br>
いいいいい・・・<br>
<br>
<a name="sono3">★みだしその３</a><br>
<br>
ううううう・・・</div>
</td>
</tr>
</tbody>
</table>

参考までに、作成してみました。
見出し部分にアンカーを設置し、

xMoveto("アンカー名");

で指定アンカーの位置の部分までスクロールします。
10行目の"330"という値はスクロールの表示領域部分に合わせて調節する必要があります。
上記コーディングの場合、表示領域は350pxですので、"330"にしています。（spt+350; にすると少し下にオーバーする）

お礼

is_mayさん、ありがとうございました。
勉強になりました。