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

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

takato(@n8takato)です!

ページ内リンクを滑らかに移動したい

この記事では上記の課題を解決します。

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

スムーズスクロールとは、メニューなどをクリックするとページ内にあるリンク先までスムーズに移動する機能のことです。

LPによく見かける機能で、お問い合わせボタンを押すとサイト下部の問い合わせフォームまでスーっとスクロールされる動きのことです。

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

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

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

この記事でわかること

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

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

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

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


他にもjQueryに関する内容の記事を作成しています。詳しくは「画像をクリックして拡大させる方法を紹介!コピペ可能なコードあり!」を読んでください。

あわせて読みたい
画像をクリックして拡大させる方法を紹介!コピペ可能なコードあり! 画像をクリックすると拡大されるように設定したい この記事では上記の課題を解決します。 webサイトの制作をしていると、画像を大きく見せるために上記の手法を取ること...
目次

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

まずはスムーズスクロールの設定の流れを説明します。設定の流れは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で良いかと思います。

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

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

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

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

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

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

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

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

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

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

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

最後に

この記事ではスムーズスクロールでページ内リンクを滑らかに移動する方法を紹介しました。

アニメーションはサイトをかっこよくしてくれます。

様々なアニメーションを駆使してサイトを作りましょう。

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