開始タグ

headerをfixedした際に、ページ内リンク先へ飛ぶとコンテンツとheaderが被って見辛い、なんてことがあると思います。
今回はその現象を解決するメモ。

方法

以下のように、ページ遷移時のアニメーションに追加で記述してあげればOK！

sample.js


$(window).on("load resize", function() {
	var breakpoint = 768; //ブレイクポイント設定
	var browseWid = $(window).width(); //ブラウザの横幅取得
	var widPc = browseWid > breakpoint; //PC表示のとき
	var widSp = browseWid <= breakpoint; //SP表示のとき

	$(document).on("click", "a[href^='#']", function() {
		if (widPc) {
			var headerHight = 125; //ヘッダの高さ
		} else if (widSp) {
			var headerHight = 80; //ヘッダの高さ
		}
	
		var speed = 800; // ミリ秒
		var href = $(this).attr("href"); // アンカーの値取得
		var target = $(href == "#" || href == "" ? "html" : href); // 移動先を取得
		var position = target.offset().top - headerHight; // 移動先を数値で取得（ここでヘッダー分の高さを引く）
		$("body,html").animate({ scrollTop: position }, speed, "swing");// スムーススクロール
		return false;
	});
});

var position = target.offset().top - headerHight;ここでheaderHight＝headerの高さを引く部分がポイント。

閉じタグ

PC/SP別で絶対値を指定してあげるもよし。
headerの高さを自動で取得するようにするもよし。
これでページ内リンク先が見やすくなりました。