【ページ内リンク】ヘッダーを固定（position:fixed）にしている場合のスクロール位置を調整する【jquery】

• facebook
• twitter
• はてなブック
• line

例えばWebサイトのヘッダーや、グローバルナビ部分をcssのposition : fixedなどで固定にしているサイトってよくありますよね。このサイトもそうです。この場合、ページ内リンクを設置した時にスクロール位置がずれてしまいます。

ここで止まって欲しいのに

こうなる。

この対処法をメモしておこうと思います。

解決策

jsに以下を追記します。

	$('a[href^="#"]').click(function() {
		var speed = 800;
		var adjust = $('#header').height();
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - adjust;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});

解説

	$('a[href^="#"]').click(function() {

aタグのhref属性が#で始まる要素がクリックされたら実行。

• 「^=」はビット排他的論理和代入演算子という。
  JQueryの構文の1つで、指定した値が属性の値と前方一致する要素を取得してます。

		var speed = 800;

対象に遷移するまでのスピード。管理のしやすさから、変数に代入する事が推奨されているらしいです。

		var adjust = $('#header').height();

ヘッダーの高さを取得。idは自分のサイトで使っているものに書き換えます。

		var href= $(this).attr("href");

対象aタグのhref属性の中身を取得して変数hrefに代入します。

		var target = $(href == "#" || href == "" ? 'html' : href);

hrefが#だけの時と空の時はhtml、それ以外はhrefを変数に代入。

• 「||」はOR演算子。
  左の値がtrueならば左の値を返し、左の値の結果がfalseであれば、右の結果を返します。つまりどちらかがあれば、という事。
• 「? ‘html’ : href」は三項演算子。
  この式の場合は、hrefが「#」or空ならhtmlを返し、それ以外であればhrefの中身を返しています。

		var position = target.offset().top - adjust;

取得したヘッダーの高さ分をマイナス。

		$('body,html').animate({scrollTop:position}, speed, 'swing');

対象までスムーススクロール。

		return false;

処理を中断します。ちなみにfalseをつけなければ、このようにアンカーリンクがURLに表示されたままになります。
https://〇〇.com/#anchor
とくに問題ないですが、すこしかっこ悪い気がしますね。残す必要がない場合はfalseをつけておいた方が無難です。