[jQuery]上部ヘッダー固定+ページ内リンクのずれを解消する

harada 884views 更新:2015年11月13日

jQueryを読み込んだ上で以下の記述を行うことで、上部ヘッダー固定の際のページ内リンクのずれ(くいこみ)を解消できます。
※ こちらはWordPressの管理ページ内で利用するようの記述になっています。

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var headerHight = 47; //ヘッダの高さ
        $('a[href^=#]').click(function(){
          var href= $(this).attr("href");
          var target = $(href == "#" || href == "" ? 'html' : href);
          var position = target.offset().top-headerHight;
          $("html, body").animate({scrollTop:position}, 200, "swing");//スムーズスクロールのスピード
          return false;
        });
    });
  </script>

参考:position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません