jQueryのスムーズスクロールでページ内リンクを滑らかにする方法を紹介!

スムーズスクロールcoding

takato@enjoying_freeです!

webサイトの制作をしているとスムーズスクロールという機能を設定することがあります。

スムーズスクロールとは、ページ内のリンク先へゆっくりとスクロールされる設定のことです。LPによく見かける機能で、お問い合わせボタンを押すとサイト下部の問い合わせフォームまでスーっとスクロールされる動きのことです。

web制作の現場でもスムーズスクロールを使用する機会はよくあります。そのためwebデザイナーやフロントエンジニアを目指す方は必須のスキルとなります。

難しそうに思うかもしれませんが、実は非常に簡単です。

今回は初心者でもできるスムーズスクロールの設定方法を皆さんに紹介したいと思います。

ピヨ
ピヨ

スムーズスクロールの設定って簡単にできるの??

takato
takato

難しそうに見えて実は簡単だよ!この記事を読み終わったらピヨもできるようになるよ!

この記事でわかること

・スムーズスクロールの作成の流れ

・スムーズスクロールに必要なコード

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

・スムーズスクロールの注意点


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

まずはスムーズスクロールの設定の流れを説明します。設定の流れは3つの流れになります。

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

・アンカーリンクの作成

・jQueryの導入

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


では、上記の流れにそって設定方法を紹介したいと思います。

アンカーリンクの作成

初めにアンカーリンクを作成します。アンカーリンクは、ページ内のリンク先に瞬時に移動する機能で、スムーズスクロールのベースとなるものです。

アンカーリンクはHTMLだけで作成することが出来ます。まず、下記のようにリンク先の部分にidを追加します。


<div class="wrapper" id="scroll">
 <p>ここが表示される</p>
</div>

クラス名・id名・文章は各自好きな内容で構いません。


次にトリガーとなるコードを記入します。


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

リンク先はid名を入力します。各自記入したid名をここにも記入してください。また、リンク先をid名にする際は、頭に「#」を入力することを忘れないでください。

これでアンカーリンクの設定は終わりです。リンクをクリックするとリンク先が表示されるかと思います。


jQueryの導入

次にスムーズスクロールを導入してリンク先に移動する動きを気持ちよくします。

jQueryのコードを<head></head>内に入れることで、スムーズスクロールの導入を行うことが出来ます。

下記コードをHTMLファイルの<head></head>内に入れてください。


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

入力できたらjQueryの導入は終わりです。

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

最後にスムーズスクロールの設定を行います。設定を行うにはJavaScriptのコードを入力する必要があります。

下記コードがJavaScriptのコードなので、コピペしてください。

場所はHTMLファイル下部の</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>

HTMLに上記のコードを入力できたら、スムーズスクロールの完成です。非常に簡単ですよね!

ピヨ
ピヨ

めっちゃ簡単や、、、

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

実はスムーズスクロールは、スクロール時間の長さを調節することが出来ます。これも簡単に設定することが出来ます。

最後に追加したJavaScriptのコードの、下記の部分を編集します。


let speed = 500;

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

今500と記入されていますが、これはスクロール完了までに0.5秒かかるという設定です。

このコードの数値を増やすと、スクロール完了までの時間が長くなります。多くのwebサイトは0.4秒か0.5秒で設定されているので、400か500で良いかと思います。

takato
takato

簡単でしょ〜!

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

実際にスムーズスクロールを設定したことのある方はわかるかもしれませんが、ハンバーガーメニューでスムーズスクロールの設定を行なった場合は注意点があります。

ハンバーガーメニューとは、ハンバーガーボタンを押すとサイトに重なった状態でメニューが表示されます。主にレスポンシブデザインで用いられる手法です。

ハンバーガーメニューでスムーズスクロールのページ内リンクを設定するとスクロールはされるのですが、ハンバーガーメニューが閉じないという現象が起こります。

他のメニューにページ遷移するのであれば問題ないのですが、ページ内リンクだとメニューが閉じずに表示されたままになるのです。

この現象を解決するには、メニュー内リンクをクリックした際にハンバーガーメニューが非表示になる設定を行う必要があります。

上記の設定は簡単にできるのでご安心ください。

ハンバーガーメニューのJavaScriptコードに下記のコードを追加することで、上記の設定を行うことが出来ます。


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

あくまでハンバーガーメニュー設定時にハンバーガーメニューのjQueryに追加するコードですので、ただのスムーズスクロールには不要です。

今コードを覚える必要はありません。上記の現象が起こるということを頭に入れておいて、必要な時にこの記事を読み返せば大丈夫です。

webデザインの勉強をするには?

webデザインを勉強している女性
webデザインの勉強

この記事を読んでいる方はwebデザイナーとして働くために日々勉強を頑張っている方だと思います。webデザインの勉強にはデザインとコーディングの2つがありますが、ここではコーディングの勉強についてお話しします。


僕もみなさんと同じく仕事をしながら勉強していました。最初は参考書とオンラインツールを使ってコーディングの勉強をしていました。

コーディングができるようになると簡易的なwebサイトを作ることができるようになり、喜びを感じておりました。しかしある程度進むとわからないことが見えてきます。

作成したコードファイルをどうすれば一般的に見れるようになるのか、JavaScriptのコードの書き方はどのようなものなのか、効率よくコーディングできる方法はあるのかなど、勉強が進むことで不明点がわかってきます。

これらをまた一人で調べるのはかなり大変だし時間もかかると思ったので、僕は思い切ってプログラミングスクールに通いました。


僕が通ったプログラミングスクールはテックキャンプというスクールです。そこでwebサイトの基本的な知識や様々な言語を学び、3ヶ月後には自分でサーバー、ドメインの設定・webサイトの構築・アナリティクスの分析などできるようになりました。

そして無事にwebデザイナーとして転職することが出来ました。

もしかしたら独学でも同じレベルまでスキルを高めることが出来たかもしれません。しかし3ヶ月では絶対に無理だと感じました。

スクールに通う良い点は成長するまでの時間を圧倒的に短縮することが出来ます。不明点はすぐに質問することが出来ますし、フォードバックも充実しています。

僕は3ヶ月で転職できるまでのスキルを得ることが出来ました。


独学で頑張るのも良いですが、スクールに通い成長時間を短縮することも視野に入れてみてはいかがでしょうか?

確かに費用はそれなりにかかりますが、その分のリターンはあると自信を持ってお伝えできます。目標は早く達成するほど人生が豊かになります。

一度オンラインで面談を受けてみてはいかがでしょうか?テックキャンプは無料で面談を行うことが出来ます。

最後に

以上jQueryを使ったスムーズスクロールのやり方の紹介でした。簡単ですよね!

初心者でも簡単に実装することができるので、是非やってみてください。