座標を取得して、後でその位置までスクロールさせる？

質問

「詳細を表示」ボタンをクリックして非表示にしていたレイヤーを表示し、
表示されたレイヤー内の「詳細を閉じる」をクリックして非表示にするものを作りました。

レイヤーを非表示にした時に、ページのスクロール位置を
「詳細を表示」ボタンをクリックした時の位置に戻したいのですが
どのようにすればできるのでしょうか。
（下のソースには関係する部分だけ抜き出してますが、実際にはページ内にいろんな情報が載っていて、非表示にした時に中途半端な位置にスクロールされた状態になってしまうと元いた場所がわからなくなってしまうので、元の場所に戻したいのです・・）

「詳細を表示」ボタンをクリックした時のY座標を取得して、詳細を閉じた時にそのY座標まで「詳細を表示」ボタンがくるようにスクロールさせる？？？とか考えて、それっぽいものを書き加えたりしてみたのですが、知識がなさすぎて全く上手くいきません…。

どなたかご教授くださいませんでしょうか。
よろしくお願いいたします。

<script type="text/javascript">
<!--
function Hyo(id, visible)
{
var style = (visible ? 'block' : 'none');
document.getElementById(id).style.display = style;
}
// -->
</script>

<a href="#" onclick="Hyo('cont1', 1)"><img src="images/button.gif" alt="詳細を表示" width="45" height="20" border="0" /></a>

<div id="cont1">
文章が入る（～中略～）文章が入る
<a href="#event" onclick="Hyo('cont1', 0)">詳細を閉じる</a>
</div>

回答No.1

yyr446 · ベストアンサー

いまいち、質問内容がよくわからないけど．．
「詳細を閉じる」のリンクが詳細の<div>の中にあるから、何もしなくても
<div>が非表示になったら、その<div>の直前が表示されるとおもうけど．．．

どうしてもというなら、
「詳細を表示」の方にidを付けておいて、そこの位置にスクロールするって
のでは、だめなんですか。

<a href="#" id ="modori1" onclick="Hyo('cont1',1);return false"><img src="images/button.gif" alt="詳細を表示" width="45" height="20" border="0" /></a>
<div id="cont1">
文章が入る（～中略～）文章が入る
</div>
<a href="#" onclick="Hyo('cont1', 0);return false">詳細を閉じる</a>
</body>

function Hyo(id,visible){
　 var elm= document.getElementById("modori1");
　 var x = y = 0;
　 while(elm){
　　 x += elm.offsetLeft;
　　 y += elm.offsetTop;
　　 elm = elm.offsetParent;
　 }
　 var style = (visible ? 'block' : 'none');
　 document.getElementById(id).style.display = style;
　 window.scrollTo(x,y);
}

それともid無しで何とかしたいって話ですか？

お礼

回答ありがとうございました！
意味がわかりづらかったみたいですみません。

＞「詳細を閉じる」のリンクが詳細の<div>の中にあるから、何もしなくても
＞<div>が非表示になったら、その<div>の直前が表示されるとおもうけど．．．

非表示／表示を切り替えるレイヤーの天地の長さが短い場合はそのままで何も問題ないのですが、長くてスクロールしなければならない場合、レイヤーを非表示にすると、ページが中途半端な位置になってしまい、元にいた場所まで戻るのがわかりづらいので、非表示にした場合にはレイヤーを表示する前の元の位置まで戻したいなと考えました。
（実際に使用したいページは情報が多くて長いページなので、レイヤーを非表示にした時に中途半端なところが表示されるとどこを見ていたのかわからなくなる感じになってしまいます。）

＜一番希望する形は・・・＞
例えばブラウザの上から100pxのところに詳細を表示するボタンがあった時にクリックしてレイヤーを表示した場合、スクロールして詳細を見た後にレイヤーを閉じた際、また詳細ボタンが上から100pxの位置になるようにしたい…という事です。

idを付けて～～という発想自体がありませんでした・・
ありがとうございます。

希望する動きができそうにない場合は、
教えて頂いたものに、「詳細を閉じる」の方にも「id ="modori1"」を入れた形でいこうかなと考えているところです。
もし、＜一番希望する形は・・・＞のような動きを実現できる方法があれば、引き続きよろしくお願いいたします。

（意味がわかりづらかったら…すみません…）

回答No.2

yyr446

idを付けていいなら、＜一番希望する形は・・・＞はNo.1のサンプルで、実現できるはずなんですけど、

<a href="#" id ="modori1" onclick="Hyo('cont1',1);return false"><img src="images/button.gif" alt="詳細を表示" width="45" height="20" border="0" /></a>

詳細を閉じたとき "modori1"にスクロールしませんか。
（何か見落としてるかな）

お礼

回答ありがとうございます。

yyr446さまに作って頂いたものは、morori1がブラウザの一番上に来るようにスクロールする形になっているかと思います。

＜一番希望する形は・・・＞
「詳細を表示」ボタンがブラウザの上から100pxにある時にクリックされた場合は、詳細を閉じた時に「詳細を表示」ボタンがブラウザの上から100pxのところにくるように・・・。
「詳細を表示」ボタンがブラウザの上から325pxにある時にクリックされた場合は、詳細を閉じた時に「詳細を表示」ボタンがブラウザの上から325pxのところにくるように・・・。

スクロールせずに詳細を閉じれば普通にずっと同じ位置に「詳細を表示」ボタンがあるのですが、スクロールして閉じた場合でも、「詳細を表示」ボタンがクリックされた時と同じ位置に表示したい…という事でした。
（文字で書くとわかりづらいですね…）

最初に作っていた状態よりも、教えて頂いた形の動きの方がわかりやすいと思うので、その方向で作っていこうかなと思っているところです。
ありがとうございます！