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

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

デザオ
するする動くと楽しいですねー
デザコト
でも、ズレてると、ん、ってなるので調整しましょうー

JavaScript

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

▽jQuery（必須）

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

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

$(function(){
  // #で始まるa要素をクリックした場合に処理（"#"←ダブルクォーテンションで囲むのを忘れずに。忘れるとjQueryのバージョンによっては動かない。。）
  $('a[href^="#"]').on('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;
  });
});

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

$(function(){
  $('a[href^="#"]').on('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のページ内リンクのスクロール（通常）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section s_01">
  <h2 id="s_01">jQuery のページ内リンクのスクロール（通常）</h2>

  <ul>
    <li><a href="#s_01_1">1</a></li>
    <li><a href="#s_01_2">2</a></li>
    <li><a href="#s_01_3">3</a></li>
    <li><a href="#s_01_4">4</a></li>
    <li><a href="#s_01_5">5</a></li>
    <li><a href="#s_01_6">6</a></li>
  </ul>

  <div class="oneArea" id="s_01_1">
    <div class="one_title">1</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_01_2">
    <div class="one_title">2</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_01_3">
    <div class="one_title">3</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_01_4">
    <div class="one_title">4</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_01_5">
    <div class="one_title">5</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_01_6">
    <div class="one_title">6</div>
    <a class="button" href="#s_01">▲ メニューに戻る</a>
  </div>
</div>

CSS

.section .oneArea {
  margin-bottom: 200px;
}
.section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 100px;
  padding: 0;
  box-sizing: border-box;
}
.section ul li {
  width: calc(100% / 6);
  border-right: 1px solid #fff;
  text-align: center;
  box-sizing: border-box;
}
.section ul li:last-child {
  border-right: none;
}
.section ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #2b2a27;
  transition-duration: 0.3s;
}
.section ul li a:hover {
  color: #2b2a27;
  background: #e8dc6a;
}
.section .oneArea .one_title {
  color: #fff;
  text-align: center;
  padding: 10px;
  background: #2b2a27;
}
.section .oneArea a.button {
  display: block;
  font-size: 12px;
  color: #2b2a27;
  text-align: center;
  background: #f3efe6;
  padding: 10px;
  text-decoration: none;
  transition-duration: 0.3s;
  margin-top: 40px;
}
.section .oneArea a.button:hover {
  background: #e8dc6a;
}
@media screen and (max-width: 1024px) {
  .section .oneArea .one_title {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section ul li a, .section .oneArea a.button { transition: none; }
}

jQuery

$(function () {
  // #で始まるアンカーをクリックした場合に処理
  $('.s_01 a[href^="#"]').on('click', function () {
    // 移動先を0px調整する。0を30にすると30px下にずらすことができる。
    var adjust = 0;
    // スクロールの速度（動きを減らす設定のときは 0）
    var speed = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 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のページ内リンクのスクロール（位置を50px上にずらす）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section s_02">
  <h2 id="s_02">jQuery のページ内リンクのスクロール（位置を50px上にずらす）</h2>

  <ul>
    <li><a href="#s_02_1">1</a></li>
    <li><a href="#s_02_2">2</a></li>
    <li><a href="#s_02_3">3</a></li>
    <li><a href="#s_02_4">4</a></li>
    <li><a href="#s_02_5">5</a></li>
    <li><a href="#s_02_6">6</a></li>
  </ul>

  <div class="oneArea" id="s_02_1">
    <div class="one_title">1</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_02_2">
    <div class="one_title">2</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_02_3">
    <div class="one_title">3</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_02_4">
    <div class="one_title">4</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_02_5">
    <div class="one_title">5</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_02_6">
    <div class="one_title">6</div>
    <a class="button" href="#s_02">▲ メニューに戻る</a>
  </div>
</div>

CSS

.section .oneArea {
  margin-bottom: 200px;
}
.section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 100px;
  padding: 0;
  box-sizing: border-box;
}
.section ul li {
  width: calc(100% / 6);
  border-right: 1px solid #fff;
  text-align: center;
  box-sizing: border-box;
}
.section ul li:last-child {
  border-right: none;
}
.section ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #2b2a27;
  transition-duration: 0.3s;
}
.section ul li a:hover {
  color: #2b2a27;
  background: #e8dc6a;
}
.section .oneArea .one_title {
  color: #fff;
  text-align: center;
  padding: 10px;
  background: #2b2a27;
}
.section .oneArea a.button {
  display: block;
  font-size: 12px;
  color: #2b2a27;
  text-align: center;
  background: #f3efe6;
  padding: 10px;
  text-decoration: none;
  transition-duration: 0.3s;
  margin-top: 40px;
}
.section .oneArea a.button:hover {
  background: #e8dc6a;
}
@media screen and (max-width: 1024px) {
  .section .oneArea .one_title {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section ul li a, .section .oneArea a.button { transition: none; }
}

jQuery

$(function () {
  // #で始まるアンカーをクリックした場合に処理
  $('.s_02 a[href^="#"]').on('click', function () {
    // 移動先を50px上にずらす
    var adjust = 50;
    // スクロールの速度（動きを減らす設定のときは 0）
    var speed = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 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;
  });
});
見本ページをひらく（位置を50px上にずらす）

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

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section s_03">
  <h2 id="s_03">jQuery のページ内リンクのスクロール（位置を50px下にずらす）</h2>

  <ul>
    <li><a href="#s_03_1">1</a></li>
    <li><a href="#s_03_2">2</a></li>
    <li><a href="#s_03_3">3</a></li>
    <li><a href="#s_03_4">4</a></li>
    <li><a href="#s_03_5">5</a></li>
    <li><a href="#s_03_6">6</a></li>
  </ul>

  <div class="oneArea" id="s_03_1">
    <div class="one_title">1</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_03_2">
    <div class="one_title">2</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_03_3">
    <div class="one_title">3</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_03_4">
    <div class="one_title">4</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_03_5">
    <div class="one_title">5</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_03_6">
    <div class="one_title">6</div>
    <a class="button" href="#s_03">▲ メニューに戻る</a>
  </div>
</div>

CSS

.section .oneArea {
  margin-bottom: 200px;
}
.section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 100px;
  padding: 0;
  box-sizing: border-box;
}
.section ul li {
  width: calc(100% / 6);
  border-right: 1px solid #fff;
  text-align: center;
  box-sizing: border-box;
}
.section ul li:last-child {
  border-right: none;
}
.section ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #2b2a27;
  transition-duration: 0.3s;
}
.section ul li a:hover {
  color: #2b2a27;
  background: #e8dc6a;
}
.section .oneArea .one_title {
  color: #fff;
  text-align: center;
  padding: 10px;
  background: #2b2a27;
}
.section .oneArea a.button {
  display: block;
  font-size: 12px;
  color: #2b2a27;
  text-align: center;
  background: #f3efe6;
  padding: 10px;
  text-decoration: none;
  transition-duration: 0.3s;
  margin-top: 40px;
}
.section .oneArea a.button:hover {
  background: #e8dc6a;
}
@media screen and (max-width: 1024px) {
  .section .oneArea .one_title {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section ul li a, .section .oneArea a.button { transition: none; }
}

jQuery

$(function () {
  // #で始まるアンカーをクリックした場合に処理
  $('.s_03 a[href^="#"]').on('click', function () {
    // 移動先を50px下にずらす
    var adjust = 50;
    // スクロールの速度（動きを減らす設定のときは 0）
    var speed = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 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;
  });
});
見本ページをひらく（位置を50px下にずらす）

いまの書き方

いまは、jQuery を使わなくても、CSS だけでするするスクロールできます。『html』に『scroll-behavior: smooth;』を付けると、ページ内リンクを押したときにスクロールして移動します。
止まる位置は、移動先に『scroll-margin-top』を付けてずらします。50px と書くと、上に 50px あけて止まります（上の「位置を50px上にずらす」と同じ）。固定ヘッダーがあるときは、ヘッダーの高さを入れておくと隠れません。

コードを見る（HTML・CSS）

HTML

<div class="section s_04">
  <h2 id="s_04">いまの書き方：CSS だけでスクロール（位置を50px上にずらす）</h2>

  <ul>
    <li><a href="#s_04_1">1</a></li>
    <li><a href="#s_04_2">2</a></li>
    <li><a href="#s_04_3">3</a></li>
    <li><a href="#s_04_4">4</a></li>
    <li><a href="#s_04_5">5</a></li>
    <li><a href="#s_04_6">6</a></li>
  </ul>

  <div class="oneArea" id="s_04_1">
    <div class="one_title">1</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_04_2">
    <div class="one_title">2</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_04_3">
    <div class="one_title">3</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_04_4">
    <div class="one_title">4</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_04_5">
    <div class="one_title">5</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>

  <div class="oneArea" id="s_04_6">
    <div class="one_title">6</div>
    <a class="button" href="#s_04">▲ メニューに戻る</a>
  </div>
</div>

CSS

.section .oneArea {
  margin-bottom: 200px;
}
/* いまの書き方：するするスクロール（動きを減らす設定のときは、すぐに移動） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* 移動先を50px上にずらす（止まる位置の上に 50px あける） */
.s_04 .oneArea, .s_04 h2 {
  scroll-margin-top: 50px;
}
.section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 100px;
  padding: 0;
  box-sizing: border-box;
}
.section ul li {
  width: calc(100% / 6);
  border-right: 1px solid #fff;
  text-align: center;
  box-sizing: border-box;
}
.section ul li:last-child {
  border-right: none;
}
.section ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #2b2a27;
  transition-duration: 0.3s;
}
.section ul li a:hover {
  color: #2b2a27;
  background: #e8dc6a;
}
.section .oneArea .one_title {
  color: #fff;
  text-align: center;
  padding: 10px;
  background: #2b2a27;
}
.section .oneArea a.button {
  display: block;
  font-size: 12px;
  color: #2b2a27;
  text-align: center;
  background: #f3efe6;
  padding: 10px;
  text-decoration: none;
  transition-duration: 0.3s;
  margin-top: 40px;
}
.section .oneArea a.button:hover {
  background: #e8dc6a;
}
@media screen and (max-width: 1024px) {
  .section .oneArea .one_title {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section ul li a, .section .oneArea a.button { transition: none; }
}
見本ページをひらく（いまの書き方：CSS だけでスクロール）

どれを使う？

  • ふつうのページ内リンク・固定ヘッダーで隠れる → scroll-behavior: smooth＋scroll-margin-top（JavaScript はいらない）
  • スクロールの速さや動き方（swing など）を決めたい・クリックしたときにほかのこともしたい → 上の jQuery

動きを減らす設定にしている人には、すぐに移動するように『@media (prefers-reduced-motion: no-preference)』の中に書いておくと親切です。

メモ

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

jQuery日本語リファレンス
jQuery（英語版）

さいごに

デザオ
スクロール楽しいですねー
デザコト
次はどこにいきましょうかねー

ふたりの小言

関連記事

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）
【jQuery】プルダウンメニューでページ内リンク
デザインのメモ 2021.9.17

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。