Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
ヘッダー上部固定でアンカーリンクがずれるのを解消する - CodingMania

2015/10/2

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

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

ページ内リンクはaタグにclass="anchorlink"を指定。(これを指定しなかったら動きません)
例)<a class="anchorlink" href="#area01">エリア01</a>
別ページにのアンカー位置にリンクを張りたい場合は、通常の書き方OK!
【2018/10/05改定】

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>