ジャンプ先の要素は aタグでなくても動作します。
HTMLでページ内のリンクを記述するコードを紹介します。
リンク(アンカータグ)の参照先アンカーポイントを記述することで、ページの長さが長い場合に指定した位置にジャンプするリンクを作成できます。
<a href="#(アンカーポイント名)">リンクの文字列</a>
遷移する場所の要素にアンカーポイント名のidを設定します。
以下のHTMLを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<a href="#section1">セクション1へ</a><br />
<a href="#section2">セクション2へ</a><br />
<a href="#section3">セクション3へ</a><br />
<hr />
<a id="section1">セクション1</a>
<div style="height:300px">コンテンツ</div>
<a id="section2">セクション2</a>
<div style="height:300px">コンテンツ</div>
<a id="section3">セクション3</a>
<div style="height:300px">コンテンツ</div>
</body>
</html>
"#(アンカーポイント名)" を記述するとページ内のリンクとなります。遷移先は `<a id="(アンカーポイント名)"> の形式で記述します。
上記のコードでは以下のリンクをクリックすると
<a href="#section1">セクション1へ</a><br />
下記の要素の場所へページ内遷移します。
<a id="section1">セクション1</a>
HTMLファイルを表示します。下図の画面が表示されます。
ページの上部に表示されている[セクション1へ]リンクをクリックするとページ内遷移し、セクション1が画面の最上部に表示される状態になります。
同様に[セクション2へ]リンクをクリックするとページ内遷移し、セクション2が画面の最上部に表示されます。
[セクション3へ]のリンクも同様です。
ページ内で遷移できるリンクを記述できました。
遷移先のidはaタグでない場合でも動作します。下記コードはdivタグのidを遷移先に指定している場合のコードです。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<a href="#section1">セクション1へ</a><br />
<a href="#section2">セクション2へ</a><br />
<a href="#section3">セクション3へ</a><br />
<hr />
<div id="section1">セクション1</div>
<div style="height:300px">コンテンツ</div>
<div id="section2">セクション2</div>
<div style="height:300px">コンテンツ</div>
<div id="section3">セクション3</div>
<div style="height:300px">コンテンツ</div>
</body>
</html>
