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

▽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】プルダウンメニューでページ内リンク

Author

デザコト

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

Googleさんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える