アップロードしたらアンカーがちゃんと動作しない。大変困ってます。

質問

ファイルをサーバにアップロードしたら、急にHTMLのアンカータグの動作が不安定になりました。
例：
下記のようなターゲット（id="2"）を
<div class="green" id="2">
ここに跳ぶ
</div>
abc.htmlにセットするとします。

そして、
下記のようなアンカーを
<a href=" abc.html#2">テスト</a>
abc.html及びdef.htmlにセットするとします。
つまり、abc.htmlファイル内では、同ページ内の特定の位置（id="2"の位置）へ、そしてdef.htmlからは他のファイル（abc.html）の特定の位置（id="2"の位置’）へリンクしたいのです。

ここで、abc.htmlファイルの内の上記アンカーからabc.htmlファイルの特定の位置（id="2"の位置）へのリンクは問題なく作動しますが、def.htmlファイル内の上記アンカーからabc.htmの特定の位置（id="2"の位置’）へのリンクの動作が不安定です。不安定というのは、このようなアンカーを幾つか使用しているのですが、全く動作しないもの又はクリックごとにちゃんと動作したりしなかったりするものがあります。全く動作しない（及びちゃんと動作しない）場合、def.htmlファイル内の上記アンカーからabc.htmの特定の位置（id="2"の位置）へ跳ばずにabc.htmのページトップに移動します。ただし、def.htmlからabc.htmへは毎回ちゃんと移動します。

この現象は、サーバ上でアンカーを動作させた場合にのみおきます。何度ファイルのアップロードを繰返しても解消できません。

どのようにすればこの問題が解消できるか、教えて下さい。

DreamWeaverMX2004を利用して開発していますが、ローカルのPC上で、テストしているときは、全てのアンカー（上記で説明しているアンカーも含めて）は問題なく動作します。サーバ上でアンカーを動作させた場合にのみ上記のような問題がおきます。

また、通常のリンク（ファイル内の特定の位置を指定しないリンク）は、サーバ上でも全てちゃんと動作します。

よろしくお願いします。

回答No.5

SAYKA

>id="2"

No4→
直接どころか　これが答えだよ。

ついでにCSSの名前もそうだね。
なんで数値で始まっちゃだめなのかって？
javascriptで各種操作をしようとすると判るけどここでは省略
勿論javascriptの関数も(以下略)

それと1にも書いたけれどname属性を併用した方が良いよ。
なぜならidでアンカーは打ってくれないブラウザ(というよりdoctypeによる動作モードの違い)が有るから。(単にid属性を認識しない)

お礼

SAYKAさん
ご回答、ありがとうございました。

アンカーが動かない理由が判明しましたので、記述します。
アンカーが動かなかった理由は、ローカルのPC（多分PCのメモリーの許容量と関係）にありました。
重いソフトをローカルのPCで開きすぎていると、ターゲット（リンク先ページの特定の位置）の位置へジャンプしませんでした。開いているソフトの数を減らすと、Web上のアンカーがちゃんと動作します。

ANo.4さんのおっしゃられた
＞idは半角英文字から始まらなくてはいけないきまりがあります。
は、今回の問題とは、直接の関係はありませんでした。idを数字にしても文字にしても動作自体に違いは見られませんでした。
ですが、良い勉強になりました。

みなさん、ありがとうございました。

回答No.4

yambejp

直接は関係ないですが、idは半角英文字から始まらなくてはいけない
きまりがあります。
なのでid="2"のような書き方はしてはいけません。

お礼

yambejpさん
ご回答、ありがとうございました。

了解しました。

回答No.3

grumpy_the_dwarf

画像を全部読み込んでみないとサイズがわかんないような書き方をし
ていませんか。abc.html#2にジャンプした「後で」画像を読み終わ
り、画像を描画する場所を空けるために文書をずらしていった結果と
して、最終的に意図した位置とは違う場所が見えてるってことがあり
ます。テーブルでもよく同じことが起きます。

img要素のheight属性やwidth属性を漏れなく指定してみてください。

お礼

grumpy_the_dwarfさん
ご回答、ありがとうございました。

トライしてみます。

回答No.2

sh_hirose

<div class="green" id="2">
ここに飛ぶ
</div>

ではなく↓ではどうでしょう？

<div class="green">
<a name="2">ここに飛ぶ</a>
</div>

これでhref属性にabc.html#2を指定するとアンカーのname属性の部分に飛びます。
id属性はCSSなどでも使用し、ページで唯一である必要があるため100%かぶらない場合のみに使用するべきです。（まぁこれはアンカーのname属性も同様ですが・・・。）

どうしてもid属性でやりたい場合は今一度ソースを見直して、かぶっているものがないか確認してください。
重複して記述してあると動作が不安定になる可能性があるので・・・（原因はこれかな？）

お礼

sh_hiroseさん
ご回答、ありがとうございました。

トライしてみます。

回答No.1

SAYKA

アンカーの付け方がどうなっているのかを補足してね。

まぁ多分name属性を併用すると治ると思うけど。

お礼

SAYKAさん

＞まぁ多分name属性を併用すると治ると思うけど。
name属性とidを”両方”記述しましたが、改善が見られませんでした。

個人的に思うのは、画像とかの多様でページが重いとアンカーの動作が不安定になっているようなんですが。解消法が分かりません。

補足

SAYKAさん
ご回答、ありがとうございました。
＞アンカーの付け方がどうなっているのかを補足してね。
すみません、意味が理解できませんでした。もう少し詳しく補足しなければならないものについてご教授ください。

＞まぁ多分name属性を併用すると治ると思うけど。
name属性とidを”両方”記述するのですか?
例：
<div class="green" id="2" name="2">
ここに跳ぶ
</div>
のように？