2020/07/28 (更新日: 2022/04/25)

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

Web

この記事の概要

Web制作者

Webサイトにページ内リンクを実装したら、固定ヘッダーに被って見出しが見えない…。
どうにか被らないようにしたいけどどうすればいいんだろう？

管理人

固定ヘッダーの高さを考慮したページ内リンク…jQueryで簡単に実装可能です！このあと詳しく説明します。

本記事の内容

固定ヘッダーを考慮したページ内リンク（スムーズスクロール）の実装方法

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日分を取得した話

おすすめ記事お名前.comのドメインプロテクションは必要か【採算がとれるか】

Programming

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

ページ内リンクの実装パターン

固定ヘッダーを考慮したスムーズスクロールの実装方法

HTML

CSS

jQuery

まとめ

RELATED