追従ヘッダーのあるサイトでアンカーリンクの崩れを防ぐ方法は?

# WEB制作

2020.01.25

​​
最近、追従ヘッダーが流行っていますよね。

固定ヘッダーとも言うのでしょうか?
正式名称はわかりませんが、多くのサイトで目にするようになりました。

▽追従ヘッダーはこんなやつ
ポートフォリオ

多くのサイトで目にするようになったせ​​いか、追従ヘッダーによるレイアウト崩れも多く目にするようになりました。

それはアンカーリンクによる崩れ。
行きたいテキストまでアンカーリンクで行ったのに、
目的のテキストがヘッダーのせいで隠れちゃってるなんてことありますよね。

わたしも気が回らずに、​​
作り終えたサイ​​トのブラウザチェックで気がつくこともありました。

今回はそんなレイアウト崩れを回避する方法を解説していきますので、参考にしてみてください。

CSS、JQuery それぞれ片方のみで、追従ヘッダーの崩れを回避する方法!

まずは状況をご覧ください。

アンカーリンクを押すと、「ここに飛ばしたいがヘッダーに隠れる」という文章が(文字通りですが、)
ヘッダーに隠れてしまいました。

See the Pen
rNNdbNx
by sank (@sank_f)
on CodePen.

ブログとかでもありますよね。
目次を押したら、見出しがヘッダーに隠れてしまい少しスクロールして戻るなんてことが。

今回はCSSjQuery、それぞれの解決方法を書いていきますので、よろしければ参考にしてください。

[CSSで簡単!]追従ヘッダーで起きるアンカーリンク崩れを回避方法は?

まずはCSSでの回避方法。

See the Pen
xxxjErr
by sank (@sank_f)
on CodePen.

と、こんな感じ。
ソースと合わせて解説すると、

ただすこし面倒くさいんですよね。
面倒くさい点としては、

  • 個別に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.

こっちのほうがシンプルですよね。

考え方はいたって簡単で、
ヘッダーの所持している高を定義し、その分をずらしています。

ソースでみるとこんな感じ。
/*スムーススクロール*/

これなら汎用性もあり、
ヘッダーの高さが変わってもここの数字を変えるだけでOKなので、
変換漏れも極力避けれます。

おすすめはこちらの方法ですので、ぜひ参考にしてみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~