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

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

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

$(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のページ内リンクのスクロール(通常)

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

HTMLとjQueryはこちら

HTML

<div class="section s_01">

  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
  </ul>

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

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

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

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

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

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

</div>

jQuery

$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('.s_01 a[href^="#"]').click(function(){
    // 移動先を0px調整する。0を30にすると30px下にずらすことができる。
    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のページ内リンクのスクロール(位置を50px上にずらす)

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

HTMLとjQueryはこちら

HTML

<div class="section s_02">

  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
  </ul>

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

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

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

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

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

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

</div>

jQuery

$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('.s_02 a[href^="#"]').click(function(){
    // 移動先を50px上にずらす
    var adjust = 50;
    // スクロールの速度
    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のページ内リンクのスクロール(位置を50px下にずらす)

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

HTMLとjQueryはこちら

HTML

<div class="section s_03">

  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
  </ul>

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

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

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

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

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

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

</div>

jQuery

$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('.s_03 a[href^="#"]').click(function(){
    // 移動先を50px下にずらす
    var adjust = 50;
    // スクロールの速度
    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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

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

関連記事

Author

デザコト

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

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)