内部リンクを画面の最上位の位置に再描画したい

[新着] Webテンプレートを仮オープンしました

0   名前： sakura ： 2007/08/21（火） 22:18  ID:fVw5YOwA sub-t1
【何をしたいのか】
<html>
 <head>
  <title>内部リンク動作の確認</title>
 </head>
 <body>
 <a name="#1" href="#1">1:</a>とにかく、最上位に表示したい。<br>
 <a name="#2" href="#2">2:</a>何とかかんとか<br>
 <a name="#3" href="#3">3:</a>何とかかんとか<br>
 </body>
</html>
「このようにしたい」といった目的を具体的に記入してください。
上記のＨＴＭＬの内部リンクを#1から#3で止めていますが、実際は１画面の行数以上に複数ページにまたがる件数の内部リンクを作製したＨＴＭＬのファイルを作製した場合に、Internet Explorerでは、クリックした時にその行が画面の最上位の位置に来ます。所が、Operaでは表示に変化はありません。

ブラウザを変えれば済む問題ですが、Operaを使いたいので何とかJavaScriptでこの問題を解決したいのですが、何か良い解決策はあるのでしょうか？
【現在の状況】
→ どこがどううまくいかないのか、何がわからないのか、などを具体的に記入してください。
JavaScriptで、内部リンクをクリックした時のコーディングが良く分からない。多分OnClick...etcのイベントを使うのかも知れないが。それが分からない。

次に分からないのが、最上位の位置から再描画をする事になる。それはどのオブジェクトが対象になるのだろうか？

最後の質問は、内部リンクをクリックした位置が残りの行数が画面のページサイズよりも少ない場合は、再描画を抑止したい。これもどのオブジェクトを参照すれば良いのか分からない。
【サンプルの提示】
→ 必要に応じてソースコードやサンプルページのURLを提示してください。
→ ★矢印の付いた行は削除して使用してください★


【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。
現在は、JavaScriptを勉強中だ。端的に、どのオブジェクトが対象だと言う事を理解すれば、道は開けると思うが、気持ちだけが先行して進捗が芳しく無い。サンプルが欲しいが、仲々良いのが見つからない。
【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★
1   名前： 匿名 ： 2007/08/21（火） 22:18  ID:t3exHk6p sub-Ds
いいけど、a nameはもう過去だよと言ってみる。

IEではうまくいくと仮定して、いまの情報で憶測すると。
名前の先頭は「数字」は止めたほうが吉。JavaScript以前だね。
これでだめなら、ソースだしてもらわないと、アドバイスしようがない。
エスパー呼ぶ？
2   名前： sakura ： 2007/08/21（火） 22:18  ID:fVw5YOwA sub-t1
a nameの名前の使い方が悪いのだろうか？名前の先頭は数字にしないで#1の所は、#a1と言う様にして、全ての名前を#aの次に数字をくっつけた。しかし、結果は同じだ。確かに、匿名氏の言う様にJavaScript以前かも知れない。

最初に「a nameはもう過去だよと言ってみる。」の所が良く分からない。a nameのどこがおかしいのだろうか？それとソース出してもらわないとアドバイスしようが無いと言われても、最初に出したＨＴＭＬのソースが全てです。それ以上のソースはありません。

それとも、a name以外の解決策があるのだろうか？叱咤激励も甘受しますので、回答の程、宜しくお願いします。
3   名前： NullPo ： 2007/08/21（火） 22:18  ID:Gi4nGlfX sub-.G
>>2
説明がわかりにくいけど、javascriptでa nameで指定したときと同じように移動させるだけなら、スクロールを動かせばすむんでなかろうか。

再描画って、確かに表示されていない部分は再描画せざるを得ないけど、こちらが意識する必要はないはず。

name属性の先頭は#だから問題ない・・・といいたいところだけど、
name属性かhref属性の指定に間違いがある。
#も使ってよかったと思うが、ブラウザが対応していない可能性があるので避けておいたほうがいい。

a nameが過去っていうのがどこからでてきたかわからないけど、id属性つけて移動する方法もある。
でも別にa nameで移動しても問題ない。
(id属性とa要素のname属性は名前空間を共有するらしい。)

ソースをだしてくれっていうのは、javascriptのソースをだしてくれという意味だと思う。
>>0で全てならjavascriptでやるのは諦めるべきだ。
HTML質問板か、総合質問版へ移動すべき。
4   名前： 匿名 ： 2007/08/21（火） 22:18  ID:HZMOh4a/ sub-Ds
０のソースがすべてなら、ある行の数字を押すとそれが、先頭になって表示されなおす。ってことですね。

私は目次や注が最初にあって、番号をおしたら、その本文まで飛ばしたいと思っていたのですが？
どっちにしても、JavaScriptの出る幕じゃない。他の事してるなら別。

もしかして、ソースくれくれ君？htmlの基礎もわからないうちからJavaScriptしてる？
上のソースが全てならJavaScript質問板で質問したのも不思議。

もう一度何がしたいのか、今どうなるのかが、第３者にわかる説明を希望する。
5   名前： sakura ： 2007/08/21（火） 22:18  ID:fVw5YOwA sub-t1
最初に書いた様に、JavaScriptは初心者だ。対象となるオブジェクトが分かれば最初の取りかかりが分かるので、そのオブジェクトの名前を知りたかった。オブジェクトが分からないのに、JavaScriptなどは書けない。私の説明も足りないのであるが。

どうやら、スクロールと言うのがWindowのオブジェクトでそれなりの物があるらしいと言う事で、少しJavaScriptを追加した。確かに少しは希望する動作には近づいてはいるが、完全解決では無い。環境はWindowsXP,Operaを使っている。
<html>
	<head>
		<title>内部リンク動作の確認</title>
		<script type="text/javascript" language="javascript">
		<!--
		function sample() {
		window.scrollBy(0,50);
		}
		// -->
		</script>
	</head>
<body>
<a href="javascript:sample()">1:</a>とにかく、色々とある。色々だ。<br>
<a href="javascript:sample()">2:</a>何とかかんとか<br>
<a href="javascript:sample()">3:</a>何とかかんとか<br>
</body>
</html>
この中で、クリックした行を画面の最上位の先頭行に移動させたい。と言うのがこのHTMLファイルを作製する目的だ。最初に書いた様に、Internet Explorerでは、Javascriptを書かなくても単なる内部リンクの操作だけで、希望とする動作が得られる。所が、Operaは動作しない。今の問題は、単にスクロールするだけでは無くて、スクロールする量を計算しないと目的の動作は得られない。

当然、スクロールする量はクリックした時の位置をビクセル単位で取得しないといけない。ウインドウの大きさも必要だ。当然、フォントの大きさでピクセルのサイズも異なる。これらを計算して、それをスクロールする関数へ引数として渡さないといけない。果たして、この様な事は出来るのだろうか？
6   名前： NullPo ： 2007/08/21（火） 22:18  ID:Gi4nGlfX sub-.G
スレ違いなんだよな。。。
<a name="a1" href="#a1">a1</a>
上で試してみる。
name属性とhref属性のどちらかの指定を間違えているよって言ったのだから調べてみたらいいのに。
>>4でもjavascriptの出番ではないと指摘しているし。

どうしてもjavascriptでやりたいなら、idつけて、要素を取得して、その要素のtop位置をとりだしその位置までスクロールさせる。
7   名前： sakura ： 2007/08/21（火） 22:18  ID:fVw5YOwA sub-t1
お恥ずかしい。とっとと退散します。てっきりInternet Explorerで動いてOperaで動かなかったから、HTMLの問題だとは思わなかった。確かに、hrefだけでうまく動作しました。しかし、これをjavascriptでやろうとしたら、id
つけて、要素を取得して、その要素のtop位置を取り出しその位置までスクロールさせると言う事は、出来るのだろうか？

スレを汚したかも知れないが、出来れば最後にその部分のオブジェクトなり、メソッドだけでも教えてもらえないでしょうか？
8   名前： 匿名 ： 2007/08/21（火） 22:18  ID:Rf.fxkHG sub-Ds
位置取得？そんなシチメンドイことしなくても、リファレン
スでlocationオブジェクトをざっと見るとすぐに見つかる。
シュルシュルシュルってのをやりたいのなら別だが。
9   名前： NullPo ： 2007/08/21（火） 22:18  ID:Gi4nGlfX sub-.G
locationオブジェクトで飛ぶと、a hrefで飛ぶのとかわんな・・・あぁ、同じことやりたいんだっけ。
そうですね。

>>7
位置の取得をするオブジェクトは、んーと、HTMLElementって言い方になるのかな。
スクロールはscrollToでいんじゃない。

他は、>>8の通りlocationオブジェクトで。
こっちのほうが簡単。
10   名前： sakura ： 2007/08/21（火） 22:18  ID:fVw5YOwA sub-t1
取り敢えず、locationオブジェクトで出来ました。下記のコードです。
<html>
	<head>
		<title>内部リンク動作の確認</title>
	</head>
<body>
<!--連続データのM4に於けるテスト-->
<a name="a1" onclick=(location.href="#a1")>1:とにかく、色々とある。色々だ。</a><br>
<a name="a2" onclick=(location.href="#a2")>2:連続データを作成中</a><br>
<a name="a3" onclick=(location.href="#a3")>3:連続データを作成中</a><br>
<a name="a4" onclick=(location.href="#a4")>4:連続データを作成中</a><br>
</body>
</html>
確かに、匿名さん　NullPoさんの言われた通り、javascriptの出番では無い。匿名さんのシュルシュルシュルってのをやりたいのなら別だが．．．と言う部分は、スクロールさせる方法の事でしょうか？もう少し、頑張ってみます。何時までも、晴れない暇つぶしの戯言ですが．．．
一覧へ戻る