jQueryを使用してスムーススクロールを実装するコードとその解説

前回の記事ではaタグの正しい使い方についてや、aタグを使って基本的なページ内リンクを作る方法についてを解説しました。

あわせて読みたい

aタグの正しい使い方! aタグを使ってページ内リンクを作る方法 今回はハイパーリンクなどを作ったりする際に使われるHTMLタグであるaタグの正しい使い方についてを解説していきたいと思います。 またaタグで作られたリンク付き文字の…

ただし、上の動画を見てもらうと分かるようにナビゲーションをクリックするとすぐにターゲットとなる要素に移動してしまい、少し味気のないような印象を与えてしまいます。

そこで今回の記事では、jQueryを使用してナビゲーションをクリックすると”スルッと”ターゲットとなる要素に移動させることができるスムーススクロールの実装方法についてを紹介したいと思います。

なお、こちらの記事では冒頭でスムーススクロールの実装用のコードを紹介し、その後でコードの解説をしているので、コードだけを知りたい方は記事の冒頭だけを見て頂いても構いませんし、しっかりコードの意味まで理解したい方は最後までご覧頂ければと思います。

以下がスムーススクロール用のコードを実装した場合の動きです。

スムーススクロールを実装するコード

スムーススクロールを実装する為のコードは以下の通りになります。

jQueryを読み込んだ後に下のコードを読み込ませればOKです。

$(function () {
  $('a[href^="#"]').click(function () {
    var speed = 500;
    var href = $(this).attr('href');
    var target = $(href == '#' || href == "" ? 'html' : href);
    var position = target.offset().top;

    $('body,html').animate({
      scrollTop: position
    }, speed, 'swing');
    return false;
  });
});

コードの解説

それではコードの解説を始めます。

1行目、13行目の解説: $(function () {});

こちらはjQueryを使用する際はおまなじないのように記述することになっているコードで、「HTML要素が読み込まれるまでjQueryを実行しない」という意味です。

このコードがなければ、例えばjQueryの記述がHTML要素よりも先にあるような場合などでは、プログラムが上手く動作しなくなったりする原因になります。

2行目、12行目の解説: $(‘a[href^=”#”]’).click(function () {}

こちらは「href属性の値が#から始まるaタグをクリックすると{}の中のプログラムが実行される」という意味のクリックイベントになります。

a[href=”#”]と書けば「href属性の値が#であるaタグ」という意味になりますが、a[href^=”#”]と書くことで「href属性の値が#で始まるaタグ」という意味になります。

3行目の解説: var speed = 500;

こちらは「任意で決めた変数名speedの中に500という値を代入する」という意味です。

こちらの値を変更することでスムーススクロールのアニメーションにかかる時間を変更することができます。(値を大きくすればより時間がかかるようになり、小さくすればより短い時間がかかるようになります。)

4行目の解説: var href = $(this).attr(‘href’);

こちらは「任意で決めた変数名hrefの中にクリックしたaタグのhref属性の値を代入する」という意味です。

例えば<a href=”#about”>about</a>をクリックした場合は、変数hrefの値として#aboutが代入されます。

5行目の解説: var target = $(href == ‘#’ || href == “” ? ‘html’ : href);

こちらは「任意で決めた変数名targetの中に変数hrefの値が#もしくは何も代入されていない場合は$(‘html’)を代入し、変数hrefの値がそれ以外の場合は$(href)を代入する」という意味です。

なお、コード内にある「?」は三項演算子と呼ばれif文の代わりとして使われます。

// 条件式 ? 式1 : 式2　は下の式と同じ意味です。

if (条件式) {
  // 式1
} else {
  // 式2
}

6行目の解説: var position = target.offset().top;

こちらは「任意で決めた変数名positionの中に対象となる要素の縦方向の位置を取得し代入する」という意味です。

例えば<a href=”#about”>about</a>をクリックした場合は、変数hrefの値として#aboutが代入され、変数targetの値として$(‘#about’)が代入されるのでaboutというid名を持つ要素が対象となる要素ということになります。

なお、offsetメソッドはHTML要素の表示位置の座標が取得できるメソッドで、y座標(縦方向)の位置とx座標(横方向)の位置を取得するので、今回のコードではoffsetメソッドにtopプロパティをつなげてy座標(縦方向)の値だけを抽出しています。

8、9、10行目の解説: $(‘body,html’).animate({ scrollTop: position }, speed, ‘swing’);

こちらは「アニメーションの動きとともに、変数positionに代入されているy座標の位置まで、変数speedで指定した速度でスクロールする」という意味です。

なお、swingというのはイージング(エフェクトの動きを加速させたり減速させるか決めるもの)の種類を表しており、デフォルトのjQueryでは他にもlinearという値を選択することができます。

11行目の解説: return false;

こちらは「親要素へのバブリングを防ぎ、かつ、aタグの機能を無効化する」為に必要なコードです。

とりあえずa要素にclickイベントを設定する際には必要な記述なんだなと思って頂ければ良いと思います。

なお、親要素へのバブリングについてはここでは詳しく解説をしませんが、気になった方は是非一度調べてみることをおすすめします。

まとめ

以上、今回はjQueryを使用してナビゲーションをクリックすると”スルッと”ターゲットとなる要素に移動させることができるスムーススクロールの実装方法についてを解説しました。

これまでコピー&ペーストで使用してきたのみでコードの意味がイマイチ分かっていなかったという方は、この機会に是非理解するようにしてみて下さい。

最後までご覧頂き、ありがとうございました。