JS/Jquery コーディング

【ページ内リンク】ヘッダーを固定にしている場合のズレ対処法【jquery】

このサイトもそうですが、ヘッダーを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

ページトップへ