jQuery：固定ヘッダーがある時にページ内リンクがずれてしまう場合の対処法

だま
だま

position: fixedで固定したヘッダーがある時、ページ内リンクでジャンプすると位置が固定ヘッダーの高さ分ずれてしまいます。

下記のjQueryを記述する事で、固定ヘッダーの高さを除いた位置にジャンプできます。

<script>
  $(function() {
    var headerHeight = 80;//固定ヘッダーの高さを入れる
    $('[href^="#"]').click(function(){
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top-headerHeight; 
      $("html, body").animate({scrollTop:position}, 200, "swing");//200はスクロールの移動スピードです
      return false;
    });
  });
</script>

デモページ

関連記事