cssでfixedにした固定メニューのページ内リンクの飛び先がズレてしまう件

ページのどこにいても
他のページに飛べるように、ヘッダーメニューを固定しているサイトが
多くなってきました。

便利なのですが、固定メニューのサイトはページ内リンクをした際に
飛び先がずれて見えるというデメリットがあります。

ずれて「見える」というのは、実際にずれているというわけではなく、
本来であればジャストのところにリンクされているところを
固定メニュー分、コンテンツが隠れてしまっているということです。

js(jquery使用)で簡単に解決できます。

$(document).on("click",'a[href^=#]',function() { //ページ内のhrefがクリックされた時のイベントを以下に登録していく
	var href= $(this).attr("href"); //クリックされたページ内リンクのhref(ID名)を取得
	var target = $(href == "#" || href == "" ? 'html' : href); //飛ばし先のIDでJqueryオブジェクトを指定。もしID名が空の場合はhtml(つまりページの先頭)を指定
	var headerH = 80; //固定メニューの高さピクセルを指定(単位は不要)
	var position = target.offset().top - headerH; //飛ばし先の正しいポジションを計算
	$('body,html').animate({scrollTop:position});//スクロールをぬるっとさせる
	return false;
});

固定メニューの高さを、計算してスクロールさせてるわけですね。

以上!

ぜひお試しを。