ページ内リンク
動作と仕組み
リンクを作るには<a>タグを使います。スタート地点の要素を<a>タグで囲めば、スタートボタンの完成です。
後は、着地点を作ればよいことになります。着地点の要素には、id="id名" でid属性を与えれば完成です。
HTML
<p>出発点は、<a href="#exit">ここ</a>です。</p>
～
<p id="exit">ここが到着点です。</p>
表示
出発点は、ここです。
出発点、到着点のいずれも<h1>、<div>、…<p>など、どの要素であっても構いません。
id名もHTMLのネーミングで許されるものであれば、好きにつけることができます。
出発点の href= には、id名の前に # をつけます。
リンク先のずれ解消策
ページ内リンクを設定して、いざ実行させると予定の着地点より（たいてい後ろに）ずれることがあります。
原因と対策
原因
ページ内リンクは、到着地点のid属性指定場所へスクロールします。この時、実はページ内に固定されたヘッダーの高さ分が無視されます。出発点でのこの高さ分余分に加算されてスクロールしてしまい、ずれが生じることになります。
対策
id属性指定場所を前へずらす等の対処法では根本的な解決になりません。ページ内のHTMLをいじっても、修正は困難です。
CSS編集でこれを補正します。CSS編集へ入ります。
CSS
/* ページ内リンクの位置合わせ */
html {
scroll-padding-top: 64px;
}
「 scroll-padding-top」を使うことで簡単に修正できます。値には、ヘッダー高さを入れます。
上記はアメブロの場合です。
※アメブロの公式では見つけることができず、独自に値を探しました。おおよその値かも知れません。
～
表示
ここが到着点です。お帰りは、こちら。