1. このページの目的
CSSの scroll-margin-top プロパティを試してみる。
<a>タグの href属性に、他の要素のidの値を指定することで、同ページ上の特定の位置にスクロールさせることができるが、このときのオフセット値を指定することができる。これは、固定のヘッダがあるページで必要になることが多い。
かなりありがたい機能である。
2. デモ
以下のリンクをクリックし、どの位置にページがスクロールするか観察します。
- 「1. このページの目的」へ
scroll-margin-topを利用していないので、先頭部分がヘッダ部分に重なってしまう。
- 「2. デモ」へ
scroll-margin-topを利用しているので、先頭部分がヘッダ部分に重ならない。
HTML
<h2 id="num2">2. デモ</h2>
<!-- 省略 -->
<a href="#num2">「2. デモ」へ</a
CSS
#num2 {
scroll-margin-top: 100px;
}