こんにちは、コーダーのchaです。
最近した仕事で、ページ内リンクの頭出しがずれるので直してくれというものがありました。
いわゆるスマホで見るとちゃんとページの途中にリンクが飛ぶのだけれど、PCで見るとページ内の変なところで止まってしまうという現象です。
原因を調べてみると最近流行りのヘッダーが固定されていて、下にスクロールすると、ヘッダーもついてくるというデザインのために、リンクで飛ぶ先がそのヘッダーのせいでずれてしまうということです。
ヘッダーが固定されていたり等の都合でページ内リンクがずれるときの解決策
結論から言うと、
Javascriptを使った方法とCSSを使った方法があるのですが、今回は自分的に最も簡単なCSSで解消することにしました。
理論的に言うと、ヘッダー分の高さをpadding-topでずらして、margin-topにマイナスの値をいれてあげると、相殺できて、うまく表示されます。
今回のケースの場合、140pxのヘッダーの高さでしたので、
結局、padding-top: 140px; margin-top: -140px;をCSSに指定してあげました。
具体的には
もともと
HTML上では、リンク先として
「h4 id=”link1″」
で指定していました。
それをCSSで、
h4 {
font-size:22px;
line-height:26x;
position: relative;/*相対位置*/
padding-left: 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: black;/*文字色*/
}
#link1 {
padding-top: 140px;
margin-top: -140px;
}
としてあげるとうまくいきました。
もし少しでも参考になりましたらSNSで拡散していただけると幸いです！
ありがとうございました。