らい・ぶらり

HTMLでのページ内リンク（ページ内ジャンプ）の実装方法と応用例

ページ内リンクのプログラム

ブログを書いていて、とりあえず結論だけ欲しい読者に向けて、付加的説明を飛ばしてもらうよう、ページ内リンクを設置する必要がでてきました。今回はページ内リンクの備忘録です。

サンプルプログラム

ページ内リンクのプログラム
a href=”#b3″>飛ばしたい方はこちら
a name=”b3″>
飛ばした先
※実際は先頭のaの前に「<」を付けます。

プログラムの説明

a href = “” の””内に番号をつけます。番号の前には#を付しておきます。今回の番号はb3としましたが、これは任意です。
飛ばした先のname=””の番号と対応させればいいのです。
このとき「飛ばしたい方はこちら」の文字列がクリックできるようになり、クリックしたら、「飛ばした先」の手前に飛ぶようになっています。

動作確認

ページ内リンクのプログラム
飛ばしたい方はこちら

hogehoge
hogehoge
hogehoge
hogehoge
hogehoge
hogehoge
hogehoge
hogehoge

飛ばした先

使用例

上記プログラムを使用したページがこちらです。
ベクトル解析の基本　ナブラ　発散　勾配　回転
ページリンク先の「発散、勾配、回転の定義だけを確認したい方はこちら」の部分です。

応用例

通常のリンクに番号を設置して、「ページが変わった先の指定した場所」へ飛ばすこともできます。例えば、ベクトル解析の発散の説明を見てもらいたいときは
a href=”http://shimaphoto03.com/science/vector-analysis/#a3″>ベクトル解析　発散の説明
と書き、リンク先のページの発散の説明の前に
a name=”a3″>
を設置すればよいのです。
※実際は先頭のaの前に「<」を付けます。