
お世話になります。
掲題がなにを指しているかと申しますと、
HTML(サーブレット)からリンクが開かれたときに指定位置までスクロールした状態で開かせてやりたいのです。
Wikipediaのような目次をクリックすると自動的にその題目までスクロールするイメージです。
JavaScriptにて、window.ScrollTo(座標)という方法は見つけましたが、Wikipediaもこの方法をとっているのでしょうか?
ほぼズレがないのでなんとなくこの方法以外にもあるのかなと思ったのですが、、、Wikipediaソースをみると、<a href= のあとに#.E…というリンクが張ってあります。これがキーなのでしょうか?
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
要素にidを付けておき、そのidをリンク先に指定します。
この場合のidをフラグメント(ID)と呼びます。
呼び出し側
<a href="#midashi1">見出し1に</a>
~
あて先側
<h2 id="midashi1">見出し1</h2>
外部から呼び出す(リンク)するときは
<a href="http://example.com/page1.html#midashi1">見出し1に</a>
なお、昔はあて先側では<a name="midashi1">を利用していました。
昔からの慣習で今でもこちらを使う人も多いし、古いブラウザへの対応を考慮して
<h2 id="midashi1"><a name="midashi1">見出し1</a></h2>
みたいに両方書ケースも見られます。
No.1
- 回答日時:
<a>タグのname属性を利用していると思われます。
<a href="aaa.html#bbb"></a>でリンクへ飛ぶと
aaa.html において<a name="bbb">と記述されている部分へ自動的に移動します。
たとえ<a name="bbb">が無くてもエラーになる事はありません。通常通り、一番上が表示されます。
ただし、高速回線が発達した最近ではあまりありませんが、
htmlのサイズが非常に大きく、画面表示に時間がかかる場合などは、<a name=~>を認識する前に、リンクのジャンプ処理が完了してしまい結果その位置まで移動しないという現象も発生する可能性があります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excel 区切り位置指定ウィザードの選択データプレビューで全列を指定する方法 お世話になります。E 1 2023/01/17 16:36
- Windows 10 画面上の[タスクバー]の位置の変更 1 2022/06/12 21:10
- その他(ブラウザ) Edgeプラウザ起動時Google画面に設定について 1 2022/09/26 16:33
- ライフスタイル・ヘルスケア Phoneで天気や気温アプリのおすすめを知りたい 1 2022/04/25 14:59
- InternetExplorer(IE) Edge でマウスの真ん中のボタン(ミドルボタン)を押すと、スクロールするのを無効にしたい 2 2023/06/11 05:05
- マウス・キーボード キーボード設定で困っています。長文です。 2 2022/12/10 12:44
- その他(プログラミング・Web制作) 外付ディスプレイで AutoHotkey の MouseMove コマンドを実行するとマウスカーソル 1 2023/03/06 00:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
form action="#"
-
指定のページの指定した位置に...
-
googleサーチコンソールで、重...
-
リンク先からリンク元の、同じ...
-
インラインフレームでの表示
-
アップロードしたらアンカーが...
-
ホームページタグで
-
ボタンワンクリックで、2つ以...
-
httpdで接続が拒否される
-
マウスオーバーでテキストの色...
-
HTMLのリンク先がづれる…
-
文法チェックエラーについて
-
インラインフレーム(リンクに...
-
別窓にスクロールをつけるやり...
-
リンクに説明をつける。
-
safariでアンカーリンクが動作...
-
インラインフレーム内のアンカ...
-
FORMタグでHTMLをリンクさせる方法
-
イメージ画像の拡大/縮小
-
画面を開いたときに指定位置ま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
form action="#"
-
リンク先からリンク元の、同じ...
-
httpdで接続が拒否される
-
ページの途中にリンクするとそ...
-
<a href="/">トップへ</a> こ...
-
googleサーチコンソールで、重...
-
Preタグ内URLからリンクは張れ...
-
インラインフレームの中に表示...
-
リンクの文字とリンクの文字を...
-
画面を開いたときに指定位置ま...
-
ページ内の画像だけを一定時間...
-
画像をクリックしたら音楽が流...
-
Ipadのsafariツールバーを...
-
a:hoverについて
-
safariでアンカーリンクが動作...
-
インラインフレーム内のアンカ...
-
a:linkのスタイルのインライン指定
-
<a target="_top" href="***.ht...
-
スクロールバー無しで下部分を表示
-
テーブル内の行の間に隙間がで...
おすすめ情報