【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

2021.9.17
jQuery

jQueryを使うとするするとスクロールして移動させることができます。
視覚的にもとても良いのでおすすめです。
また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。

するする動くと楽しいですねー

でも、ズレてると、ん、ってなるので調整しましょう

JavaScript
jQueryのページ内リンクのスクロール（通常）
jQueryのページ内リンクのスクロール（位置を50px上にずらす）
jQueryのページ内リンクのスクロール（位置を50px下にずらす）
メモ
さいごに

JavaScript

※ 『adjust』で簡単に調整することができる。

▽jQuery（必須）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

▽簡単な説明を記載しています。

$(function(){
  // #で始まるa要素をクリックした場合に処理（"#"←ダブルクォーテンションで囲むのを忘れずに。忘れるとjQueryのバージョンによっては動かない。。）
  $('a[href^="#"]').click(function(){
    // 移動先を0px調整する。0を30にすると30px下にずらすことができる。
    var adjust = 0;
    // スクロールの速度（ミリ秒）
    var speed = 400;
    // アンカーの値取得 リンク先（href）を取得して、hrefという変数に代入
    var href= $(this).attr("href");
    // 移動先を取得 リンク先(href）のidがある要素を探して、targetに代入
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を調整 idの要素の位置をoffset()で取得して、positionに代入
    var position = target.offset().top + adjust;
    // スムーススクロール linear（等速） or swing（変速）
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

▽JavaScriptには以下の記述でオッケーです。

$(function(){
  $('a[href^="#"]').click(function(){
    var adjust = 0;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});