JS・jQuery

スムーススクロール(ページ内スクロール)をjQueryで実装する方法【jQuery】

最終更新日：2024-08-05

公開日：2024-07-29

記事内に広告が含まれています。

スムーススクロール(ページ内スクロール)をjQueryで実装する方法【jQuery】

リンククリック時にページ内をスルッと滑らかに移動するスムーススクロール。
実装すると、視覚的にも良くなります。そんなスムーススクロールの実装の仕方を解説していきます。

jQueryを使ったスムーススクロールの作り方
jQuery内容についての詳しい解説
ヘッダー固定時のスクロール位置の調整
さいごに

jQueryを使ったスムーススクロールの作り方

まずは完成形を以下に記載します。
HTMLでページ内へのアンカーリンクの記述、jQueryでクリック時の動作を記述しています。基本的にはこのjQueryをコピペでスムーススクロールは実装可能となります。

<a href="#anchour">ページ内リンク</a>

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

上記の記述で、ページ内のアンカー(aタグ)で指定したidへ滑らかにスクロールします。

事前にjQuery本体の読み込みを忘れずに

jQueryを実行するにはjQuery本体を読み込みしないと動作しません。
jQueryの読み込み方法(導入方法)【jQuery】で詳しい解説をしていますので参考にしてみてください。

jQuery内容についての詳しい解説

次に上記のjQueryの記述に関しての解説をしていきます。

スクロールのスピード

const speed = 600;

スクロールのスピードを変更する場合は上記の数値を変更します。
単位はミリ秒となりますので、1秒で1000、上記の場合は0.6秒となります。

クリックした要素のアンカーを取得

let href = $(this).attr("href");

移動先の要素(idのある要素)を取得

let target = $(href == "#" || href == "" ? "html" : href);

移動先の要素(idの要素)のページトップからの位置を取得

let position = target.offset().top;

指定したスクロールの種類でスクロール

$("body,html").animate({ scrollTop: position }, speed, "swing");

上記では「swing」というスクロールの種類でスクロールします。
「swing」と「linear」から選択でき、「swing」は変速、「linear」は等速となります。

aタグクリックでのイベントを停止する

return false;

以上が今回のjQueryでのスムーススクロールの内容となります。

ヘッダー固定時のスクロール位置の調整

ヘッダーを上部に固定している場合、スクロール位置が被ってしまい隠れてしまう事があります。
そんな時に使えるスクロール位置を調整するやり方を紹介いたします。

$('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    //以下1行を変更
    let position = target.offset().top - $('header').outerHeight();
    $("body,html").animate({ scrollTop: position }, speed, "swing");
    
    return false;
});

$('header').outerHeight()でヘッダーの余白含む高さを取得し、基準の位置から引いてスクロールしています。
これで、ヘッダーに被る事は無くなります。