固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

アンカーリンク先が固定ヘッダーにより 隠れる ・ずれるのだけど、どう対処すれば良いの?

スムーズスクロールにも対応させたい。

このような疑問に回答します。

本記事では、jqueryを使って、スムーズスクロールの機能も付与しつつ、固定ヘッダーによるアンカーリンク先が隠れる・ずれる等の対処方法について解説します。

※jqueryを使うので事前にライブラリを読んどきましょう。

コードペン参考です。

See the Pen スムーズスクロール 位置調整 by Kohei (@kouk05) on CodePen.dark

上記が固定ヘッダーのずれる・隠れるに対応した参考デモです。

コードペンのJSタブをクリックし、ソースを確認してみてください。

詳細としては以下になります。

まずはスムーズスクロール機能をjqueryで記述
詳しくは以下記事参照。
https://kasumiblog.org/smooth-scroll/

var headerHight = 70;

次に、スムーズスクロール機能を実装したら、コードペンの通り、上記headerHight を宣言します。
値が70と入ってるところを、固定ヘッダーの高さ分だけ値を入れてください。

var position = target.offset().top-headerHight;

最後は、上記ソース部分に先ほど宣言したheaderHightを引いて上げればOK!

以上で完成です。

まとめ

アンカーリンクのずれの原因は、大体の場合、固定ヘッダーの下に隠れているのがほとんどです。

CSSだけでアンカーリンクのずれを解消することはできますが、いちいち一つ一つ修正していかなければいけません。

なので本記事のjqueryを使ったやり方がお勧めです。

以上で解説を終わります。

Ads

関連記事

HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
161
HTMLCSS プログラミング

【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】

2022.03.28
16
WordPress プログラミング

WordPress投稿ページ内の関連・その他記事一覧で現在のページを除外する方法【wp_query】

2022.04.20
22
WordPress プログラミング

【簡単】デフォルト検索にACFカスタムフィールドの値を含める方法【wordpress】

更新日:2022.03.19
80