ヘッダー固定時にページ内リンクのずれを考慮してスムーズスクロールを実装する方法【jQuery】

Web制作者
「Webサイトにページ内リンクを実装したら、固定ヘッダーに被ってしまって気持ち悪い・・・。どうにか被らないようにしたいけどどうすればいいんだろう?」
こういった悩みにお答えします。
本記事の内容
- 固定ヘッダーを考慮したページ内リンク(スムーズスクロール)の実装方法
こんにちは、mine(@mineblog7)です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Webサイトを見ていると、よくサイト内ジャンプでページ内リンク(スムーズスクロール)が実装されています。
普通にページ内リンクを設定すると、ヘッダー固定時に困ったことが起こります。
それは、固定ヘッダーとコンテンツ(テキストや画像など)が被ってしまう問題です。
この記事では、jQueryを使用したヘッダー固定時のずれを考慮したスムーズスクロールを実装する方法をご紹介します。
ページ内リンクの実装パターン
ページ内リンクを実装するパターンについて少し説明します。
- 普通にページ内リンクを設定する場合
- ページ内リンク(スムーズスクロール)を実装する場合
普通にページ内リンクを設定する場合
普通に上に固定ヘッダーを用意します。ページ内リンク時にテキストがヘッダーと被ってしまい、非常にスマートではないです。というか、ユーザにっとて不便ですね。
ページ内リンク(スムーズスクロール)を実装する場合
テキストとヘッダーが被らずにスムーズスクロールを実現します。
この記事ではこちらの実装方法を詳しく紹介します。
固定ヘッダーを考慮したスムーズスクロールの実装方法
ここから具体的な実装方法を詳しく紹介します。
HTML
<div class="site-header">ヘッダーエリア</div>
<!-- コンテンツ(省略) -->
<a href="#block1">コンテンツ1</a>
<!-- コンテンツ(省略) -->
<div id="block1">
<!-- コンテンツ(省略) -->
</div>
特に詳しくは書きませんが、基本のHTMLは下記リストの通りです。
【参考】HTMLの構成
- 固定ヘッダー(
site-header
クラス) - ページ内リンク(
<a>
タグ) - ジャンプ先要素(リンクと対応したid名)
CSS
.site-header {
width: 100%;
position: fixed;
background: #333;
color: #fff;
padding: 25px 0;
text-align: center;
top: 0;
left: 0;
}
CSSに関しても特に詳細はありません。
ただし、今回の記事ではヘッダー固定が前提ということを踏まえて、ヘッダー要素に対してposition: fixed;
を設定します。
jQuery
<head>内に記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
jQueryを<head>
内に記述します。
// スムーズスクロール
$("a[href^='#']").click(function(){
// ヘッダー分のずれを考慮
var diff = $(".site-header").innerHeight();
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top - diff }, 'slow','swing');
return false;
});
ページ内リンクをクリック時に、スムーズスクロールを実行します。
.animate
メソッドにscrollTop
プロパティを指定してスムーズスクロールを実現します。
scrollTop
プロパティに移動させたい位置を指定します。普通にスムーズスクロールするだけなら、$($(this).attr("href")).offset().top
だけで良いですが、今回はコンテンツの重複を回避するために、固定ヘッダー分の高さ($(".site-header").innerHeight();
)ををスクロール位置から差し引いてあげます。
あとは変化のスピードとイージング処理の設定をすればOKです(ここでは説明は省く)。よくわからなくてもソースコードコピーで、クラス名とかを変えて使っても大丈夫です。
まとめ
ページ内リンクで飛び先が固定ヘッダーと被ってしまっていて気持ち悪いな~と思っている方がいたら、数行のjQueryで解決できるのでぜひ実装してみてください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果