WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptでアンカーのある場所まで移動する方法

0:[投稿] はま [2003/11/26 14:34 ][環境:IE6、NN7 ]

<a name="test"></a>の場所までスクロールするようにしたいのですが、JavaScriptで
どのようにしたら良いのでしょうか?
urlの最後に#testを付与した時のような動きをしたいと思っています。

移動したいその時々でreplaceのurlに#testを付けて移動させる方法も考えましたが、
<input type="text">などの値が消えてしまうため使えません。

何か良い方法は無いでしょうか?


1:[回答] nero [2003/11/26 14:43 ]

location.hash = "#test";

これでいかがでしょう。

◆ window.location
http://user.ecc.u-tokyo.ac.jp/~t10521/ecmascript/tutorial/location.html

◆ ロケーション(Location)
http://tohoho.wakusei.ne.jp/js/location.htm#hash


2:[回答] はま [2003/11/26 15:55 ]

有り難うございます。
location.hashを使用する方法でも、replaceと同様リロードになってしまう為、
cgiの場合に不具合が出てしまう場合があります。

また、ちょっと特殊(実際に使用している方法)ですが下記のようにopen()、write()
などとした場合にNN7で正常に動きません。
(ただし、この場合はdocument.body.innerHTMLで行えば一応は回避できますが。)

<html>
<script>
function test(){
    w = window.open("","");
    w.document.open();
    w.document.write("<a name='test'>子</a>");
    w.document.close();
    w.location.hash = "#test";
}
</script>
<a href="javascript:test()">親</a>
</html>

他に方法は無いでしょうか?


3:[回答] J [2003/11/26 17:04 ]

<html>
<head>
<script>
function tete(id_name){
   obj = document.getElementById(id_name);
   y = obj.offsetTop;
   scrollTo(0,y);
}
</script>
</head>
<body>
<a id="aaa" href="JavaScript:tete('bbb')">bbbへ移動</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="bbb" href="JavaScript:tete('aaa')">aaaへ移動</a><br>
</body>
</html>

こんな感じでいいのかな?


4:[完了] はま [2003/11/27 12:39 ]

有り難うございます。
アンカーでもoffsetTopが使えるんですね。これを使用してやりたいと思います。有り難うございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World