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

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

目次

関連記事

HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
823
jQuery

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

更新日:2022.09.09
1677
jQuery

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

更新日:2022.09.09
3478
jQuery

【簡単】ajaxを使って別ページにある一部分のhtmlコードを取得し、読み込む方法【jQuery】

更新日:2022.09.09
750