ページ内リンクでタイトルが切れてしまう時の解決方法
ページ内リンクでタイトルが切れてしまうのは、アンカーポイントの高さがないのが原因です。
以下のようにclassを振って、CSSでブロック要素に下うえで高さを指定し、余白で位置を指定しましょう。
html リンクアンカー
必ず「id」で名前を付け、リンクボタンの方に指定するようにしましょう。
「name」は古い方法でズレの原因となりますので避けましょう。
さらに位置調整用のclassを振ります。
<a id="link" class="jump_point"></a>
CSS
a.jump_point {height: 1px;
display: block;
padding-top: 40px;
margin-top: -40px;
}
これで40px上にずれますのでタイトルが見えるようになります。
高さは任意で調節してください。
まとめ
ページ内リンクをアンカーポイントで指定する方法はシンプルで人気があります。
ただ、スマホの普及などでスムーススクロール方式のページ内リンクも増えています。
他のjsとバッティングを起こさないhtmlとSCCだけで指定できるシンプルなページ内リンクも覚えておくと便利です。
