MENU
カテゴリー

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

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

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

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

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

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

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

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

この記事を読むメリット

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

この記事を書いた人

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

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • 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の導入で簡単に実装出来る
  • トリガーがハンバーガーメニュー上にある場合は注意が必要

ページ内遷移がある場合、スムーズスクロールは必須になります。

まだやったことの無い方は是非実装してみてください。

あわせて読みたい
現役webデザイナーがオススメするスクール3選! webデザインを学ぶのにオススメなスクールを知りたい この記事は上記の課題に向けて作成しています。 webデザインが学べるスクールがいくつか存在します。 その中でオス...
あわせて読みたい
CSSでカーニング出来るfont-feature-settings! cssでカーニングの設定をしたい この記事は上記の課題に向けて作成しています。 カーニングとは「字詰め」のことを指します。 デザイン制作では文字の間隔を詰めること...
あわせて読みたい
【CSS】テキストの両端を揃える方法を紹介! cssでテキストの両端を揃えたい この記事は上記の課題に向けて作成しています。 cssではテキストの両端を簡単に揃えることが出来ます。 web制作を学んでいる方は是非参...
  • URLをコピーしました!
目次