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

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

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

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

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;
  });
});

jQueryのページ内リンクのスクロール（通常）

▽jquery.min.js（バージョン3.6.0）使用

See the Pen
jQueryのページ内リンクのスクロール（通常） by 125naroom (@125naroom)
on CodePen.

サンプルページはこちら

jQueryのページ内リンクのスクロール（位置を50px上にずらす）

▽jquery.min.js（バージョン3.6.0）使用

See the Pen
jQueryのページ内リンクのスクロール（位置を50px上にずらす） by 125naroom (@125naroom)
on CodePen.

サンプルページはこちら

jQueryのページ内リンクのスクロール（位置を50px下にずらす）

▽jquery.min.js（バージョン3.6.0）使用

See the Pen
jQueryのページ内リンクのスクロール（位置を50px下にずらす） by 125naroom (@125naroom)
on CodePen.

サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

スクロール楽しいですねー

次はどこにいきましょうかねー

関連記事

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

【jQuery】プルダウンメニューでページ内リンク