Written by Kasumi

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

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

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

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

本記事では、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を使ったやり方がお勧めです。

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

目次

関連記事

jQuery

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

更新日:2022.09.09
8851
jQuery

jQueryを使って、checkしたinput要素の label値を取得する方法

更新日:2022.09.09
8859
jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
2446
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
5973