すみません。色々過去の質問を読んでみたのですが、理解できないことが多いので、新たに質問させてください。
index.htmlでiframeを使用しています。
iframe内のURLをa.htmlとし、その中に<a name="top"></a>と作成しています。
理由はわかりませんが、a name="top"がテーブル内にあるとき、<iframe="a.html#top"></iframe>と指定しましても、テーブル内にジャンプしてくれません。一方、a name="top"をテーブルの外に出すとジャンプします。
以上を踏まえ、テーブルの外にあるtopへまず移動させ(iframe src="a.html#top"</iframe>)、そのあとtopから下へ50px、右へ100px移動させたいと思うのですが、可能でしょうか?
また、これ以外に簡単な方法はありませんか?
よろしくお願い致します。
No.1
- 回答日時:
iframeのサイズを指定しているとすれば、表示したい位置が事前に特定できるでしょうから、いきなりそこまでスクロールさせてもよろしいかと・・
onload functionで
window.scrollTo(x, y); や window.scrollBy(x, y); を
利用すればできそうです。
(後者は相対スクロールなので、#指定からのスクロールでも使えるでしょう)
http://www.tohoho-web.com/js/window.htm#scroll
ブラウザにレイアウトをまかせている部分があると、正確な位置の指定が難しくなりますね。
アドバイス有難うございます。
onload functionのwindow.scrollBy(x,y);はiframe中のa.htmlのheadに記述するのですね?
実は、a.htmlは別ページでも使用していまして、onload functionを設定してしまいますと、スクロールしたくないときにもスクロールしてしまうようです。
あくまでindex.htmlのiframe中でのみスクロールしたいんです。
有難うございます。
No.2ベストアンサー
- 回答日時:
取り敢えず、アンカーを設置する場合のみにアンカータグを使わない
方がいいかもしれません。
あと、アンカーを設置するときはname属性ではなくid属性を使用する
ように推奨されています。
(name属性は非推奨)
ただし、id属性に対応していないブラウザのためにname属性も併記して
よいことになっており、本当に正確に書くなら併記するのがもっとも
好ましいようです。
(ただ、併記するとname属性とid属性の値が同じであるというエラーに
なるという問題が...)
アンカーを設置するなら
<span name="top" id="top"></span>
とした方がよいでしょう。
(本当は<span>と</span>の間が空なのは非推奨ですがこれは仕方ない
ところです)
テーブルに設置するなら
<table>
<tr>
<td name="top" id="top">このセルにアンカーを設置</td>
</tr>
</table>
こんな感じです。
因みに、アンカーリンクは回線の状況など(?)によって正常に動作
しないことがあるようです。
いろいろ詳しい情報有難うございます。
テーブルの中で
<td><a name="top"></a></td>
としていたのをアドバイス通り
<td name="top" id="top"></td>
としましたところ、希望通りのテーブル内の場所へ移動しました。
いつもアンカータグを使っていたのですが、今回はいい勉強になりました。
有難うございます。
No.3
- 回答日時:
> topから下へ50px、右へ100px移動させたいと思うのですが、可能でしょうか?
これだけが目的であれば、こんな感じのスタイルシートを書いてみてください。
<a name="top" style="position:relative;top:50px;left:100px;
display:block;visibility:hidden;width:1px;height:1px;overflow:hidden;">.</a>
display以降のスタイルは空白のアンカーが機能しないブラウザへの対策です。
<a>.</a>には半角スペースやピリオドなど、適当な文字を入れてください。
<a name="top" style="position:relative;top:50px;left:100px;"></a>
対策が不要なら、これだけでも良いかもしれません。
> 理由はわかりませんが、a name="top"がテーブル内にあるとき、<iframe="a.html#top"></iframe>と指定しましても、テーブル内にジャンプしてくれません。一方、a name="top"をテーブルの外に出すとジャンプします。
スタイルシートがなかった頃はテーブルで枠組みを作っていたので、それでスクロールすると思うのですが、
新しいブラウザでは既存のブラウザとは異なる動作をしたり、
ブラウザのバージョンアップによりその機能が変更、削除される可能性もあります。
以下を試してみてください。一案として。
・省略可能なタグもすべて記述し、td要素にidを指定し、<a>を消す(これで期待通りに動けば、推奨)
<table>
<tbody>
<tr>
<td id="top">
~
</td>
</tr>
</tbody>
</table>
・省略可能なタグもすべて記述し、<a>を使う
<table>
<tbody>
<tr><td><a name="top"></a>
~
</td></tr>
</tbody>
</table>
・a要素の中に半角スペースやピリオドなどを書いて、隠す。(<tbody>なども省略せずに書くことを推奨)
<table>
<tbody>
<tr><td>
<a name="top" style="position:absolute;visibility:hidden;"> </a>
~
</td></tr>
</tbody>
</table>
・<a>をテーブルの外に出し、表示位置を移動させる
<a name="top" style="略。上記参照"> </a>
<table>
略
</table>
以下余談。
HTML4.01とXHTML1.0の文法上で、name属性を使ってもよいタグは
form、input、textarea、button、select
frame、iframe、object、img、applet、
meta、map、a
のみです。
このうちアンカーのためのタグは a のみで、
それ以外の要素(タグ)をアンカーとして使う場合はidを使用してください。
ただし<input>などの埋め込みオブジェクトをアンカーとして使用できるかどうかは、ブラウザに大きく依存します。
<div id="">をアンカーとして利用できるブラウザも<input name="" id="">では利用できないものが多いです。
* <td id="">がアンカーとして機能するかどうかは不明です。
あくまで個人的な考えですが。
<div>
<a name="top"></a>
~
</div>
というパターンであれば、<a>をわざわざ入れなくても
<div id="top">
~
</div>
で済むはずですので、このように書き直せるなら、<a>を使わないことを推奨します。
(name属性を非推奨ではなく、<a>はもちろん、その代わりになりそうな<span>も<div>も入れることすべて非推奨)
<a>のname属性はNetscape-HTMLとJavaScript(ECMAScriptではなく)の名残なのかもしれません。
HTML5、XHTML1.1ではaのname属性は定義されていませんし、
ECMAScriptでもdocument.formsやdocument.anchorsなどのname属性を利用する記述を定義していません。
参考URL:http://www.w3.org/TR/html4/index/attributes.html
非常に多岐に渡るアドバイス有難うございます。
<a name="top"> </a>は私のシステムではTable内で使用できないらしく<td name="top" id="top"></td>としたところ、Table内にジャンプしてくれました。
今後は<div id=""></div>や<td id=""></td>なども使って行きたいと思います。
この度は有難うございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PowerPoint(パワーポイント) ExcelのVBAコードについて教えてください。 3 2022/05/25 14:32
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitボタン押下時にPOSTされ...
-
【jQuery】input nameの文字列...
-
テキストボックスの値同士を比...
-
新しくフォルダを作成したい
-
ボタンを押すとテキストボック...
-
Javascriptでのbuttonのname属...
-
テキストエリアをenterキーでフ...
-
テキストボックスの入力をリセット
-
javascriptの値をformのinput h...
-
エクセル マクロ submitについて
-
cookie使用時にundefinedと表示...
-
二つの入力欄に、同時に同じ文...
-
JavaScriptにて動的に配列を作...
-
複数のテキストフィールドを同...
-
フォームの一部をPOSTで送信で...
-
オーダーフォーム最終確認画面
-
name属性のないformタグの、中...
-
出発駅A、到着駅Bを選択すると...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
JavaScriptにて動的に配列を作...
-
新しくフォルダを作成したい
-
二つの入力欄に、同時に同じ文...
-
Javascriptでのbuttonのname属...
-
name属性のないformタグの、中...
-
テキストボックスの入力をリセット
-
出発駅A、到着駅Bを選択すると...
-
ASP.NETでNAME属性を固定にしたい
-
submitボタン押下時にPOSTされ...
-
ラジオボタンでクリックした値...
-
テキストボックスの値同士を比...
-
jqueryでtextareaのcols、rows...
-
入力フォームに半角スペース以...
-
cookie使用時にundefinedと表示...
-
ファイル選択ダイアログが表示...
-
テキストエリアをenterキーでフ...
-
hiddenを動的に作成したい
-
ボタンを押すとテキストボック...
おすすめ情報