ページ内リンクをクリックした時のスクロール位置を、デバイスごとにずらす方法（例：スマホのみ固定ヘッダー）

スクロールしても追随する固定ヘッダーを実装しているサイトの場合、ページ内リンクをクリックした時のスクロール位置は調整する必要がある。対象要素が固定ヘッダーと被ってしまうからだ。

レスポンシブデザインであれば、固定ヘッダーの高さもデバイス毎に可変するだろうからタチが悪い。あるいは、「パコソンでは固定ヘッダーはないが、スマホではある」みたなケースも多いだろう。

そこで、ページ内リンクをクリックした時のスクロール位置をデバイスごとにずらすというテクニックが活きる。理解しておいたほうが良いだろう。
※というかページ内リンクのやり方は、（スクロール位置をずらす／ずらさないに限らず）以下のように統一したほうが良いと思う。

ページ内リンクをクリックした時のスクロール位置をデバイスごとにずらす方法

まずはcss。以下の例では、パソコンでは24px、スマホでは48px下にずらすことを想定している。

a.scroll_point {
 height: 1px;
 margin-top: -24px;
 padding-top: 24px;
 display: block;
 @media screen and (max-width: 979px) {
  display: block;
  margin-top: -48px;
  padding-top: 48px;
 }
}

HTMLでは以下のように。まずはリンク指定。

<div><a href="#sample">サービス紹介</a></div>

リンク先の対象だが、divブロックにidを指定するのではなく、直前の空のaタグにidを指定するようにすればよい。

<a id="sample" class="scroll_point"></a>
<div>サービス紹介のエリア</div>