スマホサイトでヘッダー固定の時にページ内リンクの座標がずれてしまう件

とっても久しぶりの投稿になってしまいました。ドイです。

春からお仕事関連のお声掛けが多く、ありがたいことに久々モリモリお仕事させて頂きました。

2015年4月のgoogleの「スマートフォン利用に最適化されたサイトが「モバイルでの」検索結果で優遇されやすくなるように変更する」という件により、たくさんの【スマホ案件】の対応をしてきました。
もちろんレスポンシブデザインにすることもありだと思いますが、設計・構成から見直す必要がある場合もあります。

低予算・短期納品に対応するケースでしたので、「スマートフォン最適化」としてPC版の既存サイトについてスマホ用のサイトを新規制作することになりました。

全ての案件・・・というわけではありませんでしたが、
よくあるのが『ヘッダー部分はスクロールすると上部に固定される』というパターン。
このケースでは、ページ内リンクや他のページ内リンクに移動したときに、
固定ヘッダーの高さ分だけ、座標がずれてしまいこちらの思惑通りにいかないことがあります。

今回は備忘録もかねて、
スマホサイトでヘッダー固定の時にページ内リンクの座標がずれてしまう件の対処方法　をメモ。

■例：ヘッダー固定の高さが80pxの場合、「ページトップへ戻る」と「別ページ”パーティー”コース紹介」に飛ぶ場合

/* ページ内リンク  ------------------------------------------*/	
#top {
  margin-top: -80px!important; /* 固定ナビの高さ分のネガティブマージン */
  padding-top: 80px!important; /* 打ち消し用のパディング */
  display: inline-block; /* webkitブラウザーのために必須 */
  vertical-align: top;
}

#party {
  margin-top: -80px!important; /* 固定ナビの高さ分のネガティブマージン */
  padding-top: 80px!important; /* 打ち消し用のパディング */
  display: inline-block; /* webkitブラウザーのために必須 */
  vertical-align: top;
}

CSSのネガティブマージンを利用するやり方なので、jQueryなどスクリプトを使わなくても対応可能です！
スマートフォン専用サイトを制作していてドツボにはまった私はこれで解決してみました。

Follow me!

@goristyle