125naroom / デザインするところ(会社)です。

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

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

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

NEWTOWN/グラフィック・Webデザイン
ちょっと思い出しただけ
【CSS】見出しデザインをまとめてみる(左右に線を引くとか)