>> HTML入門トップに戻る

ページ内のジャンプ

今回はページ内でジャンプする方法について説明します。
WEBページを見ていて、リンクをクリックするとページ内で、
画面がスクロールしてある位置に移動した、というようなことありませんでしたか？
その方法をご紹介します。
特に難しくありません。
タグのname属性かid属性に名前をつけて、aタグにリンクとしてその名前を設定してやるだけです。
ジャンプしたい位置のタグに、下記のようにname属性かid属性を加えてください。

name="好きな名前"
か、
id="好きな名前"


注意しなければならないのは、
name属性を使うのはaタグの場合のみです。他のタグにジャンプする場合はid属性を使って下さい。
そしてクリックするaタグのhref属性を次のようにして下さい。

href="#ジャンプするタグの該当属性名"

ジャンプしたい属性名の前に、シャープを入れてください。
例えば、ジャンプする位置の属性名をtestとした場合は、
href="#test"
と書きます。
こう設定するだけで、そのリンクをクリックすると、その属性名があるタグの位置に
スクロールしてくれます。
↓の方にあるリンクをクリックして下さい















上に移動します。
移動しましたよね？
このページの一番上の文章をspanタグで囲みid属性に名前をつけて移動させました。

ちなみにシャープの前に別ページのURLを入れれば、別ページの指定した位置にもジャンプできます。
以上がページ内でのジャンプの説明になります。
>> HTML入門トップに戻る