【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.

CSSはこちら

CSS

#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】プルダウンメニューでページ内リンク

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

gooone(ゴーン) | 三浦・三崎の観光情報マガジン
gooone(ゴーン) | 三浦・三崎の観光情報マガジン
僕と妹
無印良品のポリなんとかの収納ケース