ヘッダー上部固定でアンカーリンクがずれるのを解消する

デモページへopen_in_new

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() {
    var H_nav = $(".mod_header").height();

    function pagelink(heightnum) {
        var headerH = heightnum;
        $("a.anchorlink").click(function() {
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? "body" : href);
            var position = target.offset().top - headerH;
            $("html, body").animate({ scrollTop: position }, 500, "swing");
            //return false;
        });
        /* outpagelink */
        var url = $(location).attr("href");
        if (url.indexOf("#") != -1) {
            var url_sp = url.split("#");
            var hash = "#" + url_sp[url_sp.length - 1];
            var target = $(hash);
            var position = target.offset().top - headerH;
            $("html, body").animate({ scrollTop: position }, 500, "swing");

        }
    }
    //条件が変わるようならココへ。
    //			if($("body").hasClass("spn")){
    //				pagelink(50);
    //			}else{
    //				pagelink(72);
    //			}
    pagelink(H_nav);
});

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