【簡単】スムーズスクロールをjQueryで実装する方法を紹介!

スムーズスクロールでページ内リンクを滑らかに移動させよう!

takato(@n8takato)です!

スムーズスクロールをjQueryで実装したい

この記事は上記の課題に向けて作成しています。

スムーズスクロールはweb制作で頻繁に使用されます。

jQuerを使用することで簡単に実装することが出来ます。

この記事ではjQueryでスムーズスクロールを実装する方法を説明します。

この記事を読むメリット

  • jQueryでスムーズスクロールを実装する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

JavaScriptに関する他の記事はこちら

あわせて読みたい
クリッカブルマップでレスポンシブ対応する方法をわかりやすく説明! クリッカブルマップでレスポンシブ対応したい この記事は上記の課題に向けて作成しています。 web制作をしているとクリッカブルマップを導入する機会があります。 スマ...
目次

スムーズスクロールをjQueryで実装する方法

早速スムーズスクロールをjQueryで実装する方法を説明します。

実装する手順は下記の通りです。

スムーズスクロールを実装する手順

  1. アンカーリンクの作成
  2. jQueryの導入
  3. スムーズスクロールの設定

それぞれ説明します。

アンカーリンクの作成

始めにアンカーリンクを作成します。

アンカーリンクとは?

  • ページ内のリンク先に移動する機能のことです。スムーズスクロールの土台となります。

アンカーリンクはHTMLだけで作成することが出来ます。

①リンク先にidを追加する

まず下記のようにリンク先の部分にidを追加します。

<div class="wrapper" id="scroll">
 <p>ここはリンク先部分になります。リンク元をクリックすることでここが表示されます。</p>
</div>

クラス名・id名・文章は任意となります。

②リンク元にidを反映させる

続いてリンク元に先ほど作成したidを反映させます。

<a href="#scroll">ここをクリックすると先程の部分が表示される</a>

リンク元部分にidを記入する場合は頭に「#」を記述します。

アンカーリンクの作成は以上です。

リンク元をクリックするとリンク先に瞬時に移動すると思います。

jQueryの導入

次はjQueryを導入します。

jQueryの導入は下記コードを使用します。

jQuery導入に必要なコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

上記コードはHTMLのheadタグ内に記入します。

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

上記のように記述出来たらjQueryの導入は完成です。

スムーズスクロールの設定

最後にスムーズスクロールの設定を行います。

JavaScriptのコードを記述することで設定できます。

下記コードを使用します。コピペして頂いて大丈夫です。

<script>
        $(function(){
          $('a[href^="#"]').click(function() {
            let speed = 500;
            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;
          });
        });
</script>

上記コードはHTMLのbodyタグ直前に記述します。

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>




<script>
        $(function(){
          $('a[href^="#"]').click(function() {
            let speed = 500;
            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;
          });
        });
</script>
</body>

以上でスムーズスクロールの設定は終わりです。

ページ内遷移がスムーズに行われるか確認してみてください。

スクロール時間の長さの変更

スクロール時間の長さを変更することが出来ます。

変更する箇所は下記コード部分です。

let speed = 500;

「let speed」とはトリガーをクリックしてからスクロールが完了されるまでにかかる時間のことです。

500だとスクロールが完了するまでに0.5秒かかるという設定です。

数値を変更することでスクロール完了までの時間を調整出来ます。

多くのwebサイトは0.4秒か0.5秒で設定されています。そのため400か500で良いかと思います。

スムーズスクロールの設定で気をつけること

スムーズスクロールの設定で気を付けることが1つあります。

スムーズスクロールの設定で気を付けること

  • ハンバーガーメニューが閉じないという現象

ハンバーガーメニューが閉じなくなる

スムーズスクロールのトリガーがハンバーガーメニュー上にある場合、ハンバーガーメニューが閉じない現象が起こります。

他のページに遷移することでこの現象は解消されますが、そうしない限りハンバーガーメニューが表示されたままになりす。

この現象を回避するにはトリガーをクリックした際にハンバーガーメニューが自動で閉じる設定をする必要があります。

下記コードを先ほど記述したコードに追加することで設定出来ます。

$('トリガーとなるクラス名').on('click', function(){
        if (window.innerWidth <= 768) {
            $('ハンバーガーメニューのクラス名').click();
        }
        });

ハンバーガーメニューのクラス名」部分に指定したクラス名を記述してください。

上記コードでハンバーガーメニューが自動で閉じるようになります。

スムーズスクロールは簡単に実装出来る

最後にまとめです。

  • スムーズスクロールはjQueryの導入で簡単に実装出来る
  • ハンバーガーメニューを使用する際は注意が必要

スムーズスクロールはページ内遷移がある場合はほぼ必須です。

実装したことの無い方は出来るようにしておいてください。

¥3,080 (2022/03/08 10:49時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次