ヘッダーがfixed固定のときにページ内アンカーリンクの位置を調節するJavaScript

ヘッダーをposition:fixedで固定させたときに、ページ内アンカーリンクの位置がヘッダーに被ってしまうときの対策方法です。

cssで対処する方法がいろいろあるけれど、手っ取り早くヘッダーの高さ分調節する方法のjs対策を備忘録のために残しておきます。

スマホ表示の時にはアンカーリンクの位置をずらさない記述も書いています。

アンカーリンクの高さを調節するJavaScript

ヘッダーの高さに応じてheaderHightの値を変更するだけです。 状況に合わせて「100」の値を変更してください。

$(document).ready(function() {
    var headerHight = 100; //ヘッダーの高さ
        $('a[href*=#]').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top-headerHight; //ヘッダーの高さ分ずらす
                $('html,body').animate({scrollTop: targetOffset}, 550);
                return false;
            }
        }
    });
});

スマホのときは高さを調節しないJavaScript記述

PCのときは固定ヘッダーの分の高さに応じてずらしたいけど、スマホのときはアンカーリンクの位置をずらしたくないときのJavaScriptの記述です。

$(document).ready(function() {
	var headerHight = 100; //ヘッダーの高さ
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
		&& location.hostname == this.hostname) {
		var $target = $(this.hash);
		$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
		
		if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){//スマホ以外の時に適応
		if ($target.length) {
			var targetOffset = $target.offset().top-headerHight; //ヘッダーの高さ分位置をずらす
			$('html,body').animate({scrollTop: targetOffset}, 550);
			return false;
			}
		}
		}
		if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){//スマホの時に適応
		if ($target.length) {
			var targetOffset = $target.offset().top; 
			$('html,body').animate({scrollTop: targetOffset}, 550);
			return false;
			}
		}
		
	});
});

ちょっと長いか、もっと短くできるかも。

おまけ

アンカーリンクの位置を調節するcss

cssでアンカーリンクの場所をpaddingとネガティブmarginを使って調節するときの記述です。

#hogehoge {
    padding-top: 100px;
    margin-top: -100px;
}

これでレスポンシブでも大体のヘッダー固定サイトは対応できると思います。

-WEB