固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】
アンカーリンク先が固定ヘッダーにより 隠れる ・ずれるのだけど、どう対処すれば良いの？
スムーズスクロールにも対応させたい。
このような疑問に回答します。
本記事では、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を引いて上げればＯＫ！
以上で完成です。
まとめ
アンカーリンクのずれの原因は、大体の場合、固定ヘッダーの下に隠れているのがほとんどです。
CSSだけでアンカーリンクのずれを解消することはできますが、いちいち一つ一つ修正していかなければいけません。
なので本記事のjqueryを使ったやり方がお勧めです。
以上で解説を終わります。
目次
