【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する

あのー、CSSだけで調整できますかー？

CSSだけでも調整できますよー

固定ヘッダーで隠れる（ズレる）

こんな感じでズレてます。

See the Pen
ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れる） by 125naroom (@125naroom)
on CodePen.

CSSで調整する

うーん、jQuery（JS）を修正するのは、ちょっと。。
と言う時には、CSSで調整できます。
（レスポンシブには向いてないかなと思いますが。。）

See the Pen
ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れる）、CSSで調整する by 125naroom (@125naroom)
on CodePen.

#a_1, #a_2, #a_3, #a_4, #a_5, #a_6, #m_01 {
  padding-top: 100px;
  margin-top:-100px;
}

jQueryで調整するほうがベストです

【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

さいごに

ぴったりですー

どうしてもjQuery（JS）を修正できない時にはおすすめですー

関連記事

【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

【jQuery】プルダウンメニューでページ内リンク