まずはお決まり、jQueryを読み込みましょう。

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>

そして、Javascriptを記述します。

$(function(){
  // #で始まるリンクをクリックした場合
  $('a[href^="#"]').click(function(){
    // 移動先の調整　例えば「100」にすると100ピクセルずらして移動します　マイナスの値も可能
    var adjust = 0;
    // スクロールの速度（ミリ秒）
    var speed = 400;
    // リンク先を取得してhrefという変数に代入
    var href= $(this).attr("href");
    // リンク先にidがある場合ターゲットとして値を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // ターゲットの位置を取得し、調整がある場合は位置の調整を行う
    var position = target.offset().top + adjust;
    // スクロール実行
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

これで「#」から始まるページ内リンクのみ、jQueryを使ってスムーズスクロールをするようになりました。スクロール速度が遅いなと感じる場合は、var speed = 400; の値を変更してみてください。値を小さくすると素早く動くようになりますが、速すぎると情緒がなくなっちゃう可能性があるので、お好みで調整してみてください。

スクロール位置の調整も可能です

例えばh2タイトルへのスムーズスクロールを行なった場合、何も設定しないとh2タイトル真上に移動します。ちょっと詰まっているなと感じる場合もあるでしょう。そんな時は、スクロールの位置を調整してズラしてあげるとスッキリするかもしれません。

var adjust = 0; に数字を入れると、位置の調整が可能です。例えば var adjust = 100; と入力すると、100ピクセル位置をずらして移動ができます。マイナスも値も可能。

また adjust には変数を入れることもできます。例えばposition:fix;で固定されているヘッダーがある場合、jQueryでスムーズスクロールを行うとヘッダーが被ってしまいコンテンツが隠れてしまいます。先程のように固定値で位置調整してズラすのも手ですが、パソコン版とスマホ版で高さが変わってしまうこともあるかもしれません。そこで、ヘッダーの高さを取得してきて、adjust に指定して位置調整をしてあげると、固定したヘッダー下に移動先が隠れず綺麗にスクロールします。

$(function(){
  // #で始まるリンクをクリックした場合
  $('a[href^="#"]').click(function(){
    // 例えばヘッダーの高さを事前に取得
    var h = $('.header').outerHeight(); // 追加
    // adjust に代入するとヘッダーの高さを取得してズラせる。
    var adjust = h; // 変更
    // スクロールの速度（ミリ秒）
    var speed = 400;
    // リンク先を取得してhrefという変数に代入
    var href= $(this).attr("href");
    // リンク先にidがある場合ターゲットとして値を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // ターゲットの位置を取得し、調整がある場合は位置の調整を行う
    var position = target.offset().top + adjust;
    // スクロール実行
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

こうすることで、ヘッダーの高さを毎回取得して位置調整を行なった上でスムーズスクロールができます。例えばこのままだとヘッダーの真下にタイトルがスムーズスクロールしてくるので、先の例のようにちょっと余白を開けて余裕を持たせたい場合は var adjust = h + 100; のように、取得してきた値に、さらに値を追加することでちょっとズラす位置調整も可能です。

ぜひご参考までに！

更新日 :2021.08.24

技術ブログの記事一覧を見る