スムーススクロールを設置する方法（最新jQuery対応）

2021/3/6

2021/10/4

3845 views

ページ内リンク×ゆっくり

目次などのサイト内のリンクをゆっくりと移動するスムーススクロール。
おしゃれな動きを演出できるだけでなく、ユーザーにとっても移動先が分かりやすくなるというメリットもあります。
今回は、このスムーススクロールを実装する方法を解説します。
ちなみに動作確認は、このサイトの「目次」でできます。

1 実装方法
2 【応用】移動位置をずらす
3 ちなみに最新のjQueryに対応しています
4 まとめ

実装方法

1. jQueryを読み込むさせる

スムーススクロールには、jQueryが必要です。
サイトに読み込んでいない場合は、下記コードを記述してjQueryを読み込ませます。

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

2. scriptを記述する

下記のスクリプトを<head>か<footer>の中に記述します。

<script type="text/javascript">
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;//スクロールスピード
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>

【応用】移動位置をずらす

固定ヘッダーにしているサイトではヘッダーの高さ部分をずらして移動させたいこともあります。
その場合は下記のように記述ください。
var adjustの数値を実際に合わせてください。

<script type="text/javascript">
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;//スクロールスピード
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var adjust = -100;// 移動先を100px上にずらす
    var position = target.offset().top + adjust;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>