- ベストアンサー
ページが開かれたとき、同ページの指定位置へリンクするには？
下記のようなレイアウトのカレンダーを表したHTMLファイルがあります。 1行目：7/1 2行目：7/2 . . . (中略) 30行目：7/30 31行目：7/31 このファイルが開かれたとき、途中の7/15などをスクロールさせて一番上の行に持ってくる方法が分かりません。例えば本日の日付をシステム日付から取得し、本日の行を一番上の行として表示させたりしたいのです。 ご存知の方いましたら、是非教えて下さい。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
> 本日の日付をシステム日付から取得し という部分が、サーバーサイドで行うかどうかによって違うと思います。 サーバーサイドならアンカータグのジャンプ先に日付識別子を付けるとか。 クライアントサイド、ようするにブラウザスクリプトだけで実現するなら、やはりアンカータグを全部の日付に付けるか、あるいは日付の文字列を検索させてしまうとか。 たとえば以下の感じ。 ※Win＋IEでのみ動作確認（というか、おそらく限定）。 ※スクロールさせるために行間を空けてあります。 ------------------ <html> <head> <style type="text/css"> p { height: 200px; } </style> <script type="text/javascript"> <!-- function FindToday() { var oDate = new Date(); var sDateText = (oDate.getMonth()+1) + "/" + oDate.getDate(); var oRange = document.body.createTextRange(); if (oRange.findText(sDateText)) { oRange.select(); } } --> </script> </head> <body onload="FindToday()"> <p>7/1</p> <p>7/2</p> <p>7/3</p> <p>～～～</p> <p>7/20</p> <p>7/21</p> <p>7/22</p> <p>7/23</p> <p>7/24</p> <p>7/25</p> <p>7/26</p> <p>7/27</p> <p>7/28</p> <p>7/29</p> <p>7/30</p> <p>7/31</p> </body> </html>
その他の回答 (4)
- koutarou504
- ベストアンサー率44% (182/407)
あの～、まずそのカレンダーをどう処理する前提でしょうか？ 手動でカレンダーを毎回作られるのですか？ それによって取得する「システム日付」から本日と認識する仕掛けの考え方がそもそも変わってきます。 で、仕掛けもいろいろな方法があり、 ＣＧＩやjavascriptにて下記のタグを書き出せば出来ますし、 （以下、対象に ID, NAME でsida2005715pと付けているという前提。） <meta http-equiv="Refresh" content="10;URL='#sida2005715p'"> javascript で window.self.location.href="#sida2005715p"; としてもよいかと。 （こちらは、javascriptが無効だと動きませんが。） ただ、いずれもカレンダーも月が替われば更新されているというか、 対象日付があっての事ですから、 まずカレンダーをどの様に作成するのかがポイント。 手作業なら事前に用意していない日付になった時に問題が発生します・・・。 また、javascriptの場合は日付はそれこそ閲覧者の環境次第で 故意か過失か日付がいつであるかは保障の限りでないので要注意です。 で、出来ればカレンダーの仕掛けを開示して改めて質問されるのも良いかと・・・。
お礼
koutarou504さん、回答ありがとうございます。 私の質問の内容に不備があったようなので、より詳細な内容で再掲載しました。
- quads
- ベストアンサー率35% (90/257)
動的に読み込ませるのであれば、日付などを読み込ませ、それに見合ったスクリプトで操作する必要があります。 単純にリンク先をページの指定したインライン要素が上端に表示されるような方法でよいのであれば、既に回答されている方法でよいかと思います。 しかしながら、IDトークンとNAMEトークンはアルファベットで始まらなければいけません。 Webブラウザによっては解釈できないことがあります。
お礼
quadsさん、回答ありがとうございます。 私の質問の内容に不備があったようなので、より詳細な内容で再掲載しました。
- shinkun0114
- ベストアンサー率44% (1553/3474)
まずは、ジャンプさせたい場所に、ラベルを指定しておきます。 （ラベルは英数字です。スラッシュは使えません） ： <a name="715">7/15</a> ： 次に、リンク元のページのアンカータグを次のように指定します。 <a href="***.html#715">○○</a> つまり、通常のファイル名の後に、半角の#、その後にラベルを 指定すると、その場所へジャンプします。
お礼
shinkun0114さん、回答ありがとうございます。 私の質問の内容に不備があったようなので、より詳細な内容で再掲載しました。
- the845t
- ベストアンサー率33% (246/743)
<a name="0701" id="0701">7/1</a> <a name="0702" id="0702">7/2</a> . . . とし、呼び出す際は <a href="hoge.html#0715">7/15の記事へ</a> といった感じでしょうか。 本来idなのですが、現状ではnameと併用が望ましいようです。
お礼
the845tさん、回答ありがとうございます。 私の質問の内容に不備があったようなので、より詳細な内容で再掲載しました。
お礼
tasekiさん、回答ありがとうございます。 私の質問の内容に不備があったようなので、より詳細な内容で再掲載しました。