【JS/jQuery】スムーススクロールの位置調整する方法を解説

ページ内リンクを滑らかに動かすスムーススクロールを実装する際、上部固定のヘッダー分だけ位置をずらしたいときがたまにあると思います。そんなときにつかえるやつコードを紹介しています。

実際のコードを見てみる
1. PCとSPでスムーススクロールの飛ばし位置を変えたい場合
まとめ

実際のコードを見てみる

$(function () {
　　//↓　100px分ずらしたい場合
    var headerHight = 100;
    $('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 }, 1000, "swing");
      return false;
    });
});

var headerHight = 100;　の’100’を固定ヘッダーの高さ分調整していくイメージです。

またリンクの飛ばしスピードは

$(“html, body”).animate({ scrollTop: position }, 1000, “swing”);　ここの’1000’を調整してください。

PCとSPでヘッダーの高さが変わる場合は以下で記載しているコードを使うと切り替えができて便利です。

PCとSPでスムーススクロールの飛ばし位置を変えたい場合


$(function (){  
    var windowWidth = $(window).width();
    var windowSm = 767;
    if (windowWidth <= windowSm) {

    
    //横幅767以下（SP）に適用させるJavaScriptを記述
    $(function () {
    
    //↓　80px分ずらすイメージ
        var headerHight = 80;
    
        $('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 }, 1000, "swing");
          return false;
        });
    });
    
    } else {
    
    //横幅767以上（PC）に適用させるJavaScriptを記述
    $(function () {
    
    //↓　130px分ずらすイメージ
        var headerHight = 130;
    
        $('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 }, 1000, "swing");
          return false;
        });
    });
    
    }
});

イメージ的にはこんな感じです。ヘッダー分+30pxくらい位置をあけると見え方としてはよくなると思います。好みの飛ばし位置を探してみてください。