aタグに指定のclassが追加されている場合にだけ、同ページ内アンカーリンク、別ページアンカーリンクを指定した高さ分ずらして表示します。

aタグにclass="anchorlink"を指定。(これを指定しなかったら動きません)
例)<a class="anchorlink" href="#area01">エリア01</a>
別ページにのアンカー位置にリンクを張りたい場合は、classの指定とhrefの書き方をちょっと変更します
例)<a class="anchorlink" href="02.html?id=area03">【ページ02】エリア03</a>
参考にしたサイト>固定ヘッダー サイト内、ページ内#リンクとページ外#リンク | BeanB

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

//header
$(function() {
var marginTop = $(".mod_header").height();
  $(window).on("scroll", function() {
    if ($(this).scrollTop() > 0) {
      $(".mod_header").addClass("fixed");
	  $("body").css("margin-top",marginTop+"px");
    } else {
      $(".mod_header").removeClass("fixed");
	  $("body").css("margin-top","0px");
    }
  });
});


//#pagelink
$(function(){
	function pagelink(heightnum){
	var headerHight = heightnum; 
	$("a.anchorlink").click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? "body" : href);
		var position = target.offset().top-headerHight; 
		$("html, body").animate({scrollTop:position}, 500, "swing");
		//return false;
	});
	/* outpagelink */      
	var url = $(location).attr("href");
	if (url.indexOf("?id=") == -1) {
	
	}else{
		var url_sp = url.split("?id=");
		var hash     = "#" + url_sp[url_sp.length - 1];
		var target2        = $(hash);
		var position2        = target2.offset().top-headerHight;
		$("html, body").animate({scrollTop:position2}, 500, "swing");
	}
	}
	//条件が変わるようならココへ。	
	//			if($("body").hasClass("spn")){
	//				pagelink(50);
	//			}else{
	//				pagelink(72);
	//			}
	pagelink(56);//ヘッダーの高さを入れる
});

HTMl

<div class="mod_linklist">
<ul>
	<li><a class="anchorlink" href="#area01">エリア01<i class="fa fa-angle-down"></i></a></li>
	<li><a class="anchorlink" href="#area02">エリア02<i class="fa fa-angle-down"></i></a></li>
	<li><a class="anchorlink" href="#area03">エリア03<i class="fa fa-angle-down"></i></a></li>
	<li><a class="anchorlink" href="#area04">エリア04<i class="fa fa-angle-down"></i></a></li>
	<li><a class="anchorlink" href="#area05">エリア05<i class="fa fa-angle-down"></i></a></li>
 	<li><a class="anchorlink" href="02.html?id=area03">【ページ02】エリア03<i class="fa fa-external-link"></i></a></li>
</ul>
</div>
<section id="area01">
<h2>エリア01</h2>
<p>私は昔どうもその反抗学というののために解りただ。初めてほかが指図院はどうぞこの相違ないませまでにつかからもらっですをは徹底知れなでしょて、それだけにもいただであり。新が云っんのは必ずしも場合にどうもですだた。いかに嘉納さんに記憶国家それほどごろごろへ断わろまし鼻その本何か持にというご尊重ありましないでと、この十一月はおれか理由考が云わて、三宅さんの事を教授の私がようやくご安心と行かて私主義のお相当で当てようにもしご誘惑を云いですたから、ついにもし影響を帰っますがいるた事を正さたたい。つまりまたご主義を立ち入り点はああ立派と当てでしから、その麦飯をは知れだがという個人が認めてくれるでまし。</p>
</section>