追従ヘッダーのあるサイトでアンカーリンクの崩れを防ぐ方法は？
2020.01.25
最近、追従ヘッダーが流行っていますよね。
固定ヘッダーとも言うのでしょうか？
正式名称はわかりませんが、多くのサイトで目にするようになりました。
▽追従ヘッダーはこんなやつ
ポートフォリオ
多くのサイトで目にするようになったせいか、追従ヘッダーによるレイアウト崩れも多く目にするようになりました。
それはアンカーリンクによる崩れ。
行きたいテキストまでアンカーリンクで行ったのに、
目的のテキストがヘッダーのせいで隠れちゃってるなんてことありますよね。
わたしも気が回らずに、
作り終えたサイトのブラウザチェックで気がつくこともありました。
今回はそんなレイアウト崩れを回避する方法を解説していきますので、参考にしてみてください。
CSS、JQuery それぞれ片方のみで、追従ヘッダーの崩れを回避する方法！
まずは状況をご覧ください。
アンカーリンクを押すと、「ここに飛ばしたいがヘッダーに隠れる」という文章が（文字通りですが、）
ヘッダーに隠れてしまいました。
See the Pen
rNNdbNx by sank (@sank_f)
on CodePen.
ブログとかでもありますよね。
目次を押したら、見出しがヘッダーに隠れてしまい少しスクロールして戻るなんてことが。
今回はCSS・jQuery、それぞれの解決方法を書いていきますので、よろしければ参考にしてください。
［CSSで簡単！］追従ヘッダーで起きるアンカーリンク崩れを回避方法は？
まずはCSSでの回避方法。
See the Pen
xxxjErr by sank (@sank_f)
on CodePen.
と、こんな感じ。
ソースと合わせて解説すると、
|
1 2 3 4 5 6 |
&.apeal { display:inline-block; margin-top: -68px;//padding-topを相殺用。 padding-top: calc(68px + 1em);//追従ヘッダー分 ＋ もともと要素の与えた高さ。 font-size: 1.6rem; color:#ff9797; } |
ただすこし面倒くさいんですよね。
面倒くさい点としては、
- 個別にCSSを書かないといけない。
今回もそうですが、<p>要素に与えたCSSを考慮する必要がありました。
例えば、これが<h2>の要素に飛ばすのであれば、また違ったCSSを書く必要があります。 - 追従ヘッダーに変更を与えた場合、アンカー先のCSSを変更する必要がある。
例えばヘッダーに要素が増え、高さが150pxになってしまった場合はアンカー先のpadding-topを150px以上にする必要が出てきます。それもアンカーで飛ばす要素全てに。 ……etc
汎用性があまりよくないですよね。
解決策としては接頭辞に対してCSSをあてる方法でしょうか。
例えばid=”anc01″などのanc~にすべて同一のCSSをあてるといった具合。
ただやっぱりそれぞれもとに与えたCSSをリセットする必要、
あるいは最初からすべてを考慮する必要がありますので、少し面倒くさい。
ただアンカーが少ないとか、目次とそれぞれの見出しのみという関係であればCSSでパパっとやるのもありだと思いますので、参考にしてみください。
［JQueryで簡単！］追従ヘッダーで起きるアンカーリンク崩れを回避方法は？
次にJQueryでの回避方法を！
See the Pen
abbGprN by sank (@sank_f)
on CodePen.
こっちのほうがシンプルですよね。
考え方はいたって簡単で、
ヘッダーの所持している高を定義し、その分をずらしています。
ソースでみるとこんな感じ。
/*スムーススクロール*/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function () { $('a[href^="#"]').click(function () { var headerHight = 68; //ヘッダの高さを定義する。 var speed = 500; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //68px 分ヘッダーの位置をずらしました。 $("html, body").animate({ scrollTop: position }, speed, "swing"); return false; }); }); |
これなら汎用性もあり、
ヘッダーの高さが変わってもここの数字を変えるだけでOKなので、
変換漏れも極力避けれます。
おすすめはこちらの方法ですので、ぜひ参考にしてみてください。
