アンカーリンクがずれるのを直したい

レスポンシブ形式のWEBサイトで、
【ヘッダーをページの途中で固定】
【ページ内リンクで飛んだ際、固定されたヘッダーの高さ分の余裕を持たせたい（リンク先がずれるのを直したい）】
です。

http://www.yumemono.net/anchor-link-shifted/
こちらのサイトを参考に、【ページの途中でヘッダーを固定】はできたのですが、
アンカーリンクで飛んだ際、ヘッダー分の高さが調整されませんでした。

JSのアンカーリンク部分をどう修正すればよいのかわからず、どなたかお教えいただけると助かります。

JavaScript

	/*****************************************
	ナビゲーション固定
	*****************************************/
	$(window).on('scroll', function() {
		if ($(this).scrollTop() > 50) {//固定するまでの距離
			$('.header-fixed').addClass('fixed-header');
		} else {
			$('.header-fixed').removeClass('fixed-header');
		}
	});
	/*****************************************
	固定ヘッダーでアンカーリンクがずれる対策
	*****************************************/
	$(function(){
		var navLink = $('.anchor a');
		var headerHight = $('.header-fixed').outerHeight(true);
		navLink.click(function(){
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top-headerHight;
			$('body,html').animate({
				scrollTop: position
			}, 500);
			return false;
		});
	});

CSS
	.header-fixed{
		width: 100%;
		z-index: 999;
	}
	.fixed-header{
		position:fixed;
		top:0;
		left:0;
		z-index:10000;
	}
	.header{
		color:#fff;
		background-color: #111;
	}
	.wrapper{
		width: 100%;
		position:relative;
	}
	.title{
		padding: 0 .5rem;
		background-color:#ccc;
	}
	.page{
		min-height: 500px;
	}

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link href="normalize.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>

</head>
<body id="wrap">

	<div class="header-fixed">
		<div class="header">
			<div class="gNavIn">
				ヘッダー部分（レスポンシブのため高さは可変）
			</div>
		</div>
	</div>

	<div class="wrapper">
		<div class="pageContents anchor">
			<ul>
				<li><a href="#hoge1">見出し1</a></li>
				<li><a href="#hoge2">見出し2</a></li>
			</ul>
		</div>

		<div class="page" id="hoge1">
			<div class="title">見出し1</div>
			<p>見出し1の本文テキスト</p>
		</div>

		<div class="page" id="hoge2">
			<div class="title">見出し2</div>
			<p>見出し2の本文テキスト</p>
		</div>
	</div>
</body>
</html>