【jQuery】ぬるっとスクロールさせたい！スムーススクロールの実装

jQueryの解説

jQueryの導入が終わったので、ようやくぬるっとスクロール「スムーススクロール」のコードを記述していきましょう。

自作jsファイルまたは、HTMLファイル内に直接記述していきます。

スムーススクロールのコード

まずは、完成形のコードを見ていきましょう。

$(function() {

  $('a[href^="#"]').click(function() {

    // アンカーの値(出発地点)の取得
    let href = $(this).attr('href');
    // 移動先を取得
    let target = $(href == "#"  || href == "" ? 'html' : href);
    // 移動先の位置を調整
    let position = target.offset().top -= 50;
    // スクロール速度を500ミリ秒にする
    let speed = 500;
    // スムーススクロール
    $('html, body').animate({scrollTop: position}, speed, "swing");

    return false;
  });
});

全然意味が分かりません……

spica

少しずつ解説していくから大丈夫ですよ！

では、さっそくコードの中身を見ていきましょう。

実行予約 $(function(){})

「HTMLの読み込みが終わったら、このjQueryを実行してください」という意味を持ったコードです。

｛｝の中にjQueryの処理を書いていきます。

$(function() {
 // jQueryを記述
});

上のコードは省略形で、正式な記述はこちらです。

$(document).ready(function() {
 // jQueryを記述
});

$(document)が「HTML全体」のことで、readyが「準備ができたら」という意味になります。

省略形は、「$(document).ready」を「$」一文字で表しています。

どちらを使用しても動作は同じです。

メニューがクリックされた時

jQueryの構文は、「$(セレクタ).メソッド(引数);」が基本です。

セレクタはCSSとほぼ同じで、メソッドは動詞のようなものです。

$('a[href^="#"]').click(function() {
 // クリック時の処理
　return false;
});

このコードを訳してみると、「<a>タグのhref属性の#で始まる要素」.「クリックした時」つまり、

<a href=”#〇〇”>をクリックした時

となります。

「return false;」は、HTML本来の機能を実行させないようにするJavaScriptで、a要素とclick()を使用するときによく出てきます。

出発地点の値を取得する

ここでは「let」を用いて「変数を宣言」しています。JavaScriptの基本文法です。

「let 変数名 = 値;」で、変数に値を代入します。

「this」は「’a[href^=”#”]’」を置き換えたセレクタ、「attr()」は要素の属性を取得するメソッドです。

    // アンカーの値(出発地点)の取得
    let href = $(this).attr('href');

「$(this).attr(‘href’);」を訳してみると、「a要素のhref属性を取得」となります。

クリックされた<a href=”#〇〇”>の「#〇〇」部分を取得をし、その値を「href」に代入する、という意味です。

「変数hrefが、クリックしたa要素のhref属性の#〇〇」という意味に変わりましたよ」と宣言したのですね。

移動先の位置を取得する

ここでも「let」を用いて、変数targetを宣言しています。

　　// 移動先を取得
    let target = $(href == "#"  || href == "" ? 'html' : href);

なにこれー！
まったく意味が分かんないよー！！

spica

たしかに、これを見てもなんのことやらさっぱりですよね……。

では、さっそく「$(href == “#” || href == “” ? ‘html’ : href);」の部分を分解してみましょう。

「href」とは、一つ前で記述した「変数href」を指します。

「href == “#”」は、「変数hrefの値が#」

「||」は論理演算子で、「または（or）」

「href == “”」は、「変数hrefの値が空」

「?」は三項演算子でif文の省略形

「’html’」は、「ページトップへのリンク」

「:」は、「そうでないなら（else）」

「href」の値が移動先となる。

……分解してもまだ分かりにくいですね。

コードの中に「?」が含まれているので、これがif文であることが分かります。

では、先ほどのコードをif文で書いてみましょう。

// if文にしてみる
　if(href == "#" || href == ""){
　　let target = $('html');
　　}else{
　　let target = $(href);
　}

これならなんとなく分かりやすくなったような気がします。

「もし、変数hrefが「#」か空だった場合、変数targetには「ページトップへのリンク」を代入する。それ以外は変数hrefが変数targetに代入される。」

という内容だったわけです。

JavaScriptの基本が分かっていれば、難しそうに見えるコードも読み解けるようになりますよ！

JavaScriptが学べる本

コンテンツの上部を50px下げる

移動先の位置を変数positionに代入します。

    // 移動先の位置を調整
    let position = target.offset().top -= 50; 

「offset().top」でコンテンツの縦位置（座標）を取得することができます。

その位置から「-= 50」、つまり50px減らします。ここの値は任意ですので、ヘッダーの高さなどから決めましょう。

これで、「変数positionに、変数targetの縦位置から-50pxした値が代入」されました。

早さは0.5秒

スクロール速度を変数speedに代入します。

管理しやすさの点から、変数にすることが推奨されています。

　　// スクロール速度を500ミリ秒にする
    let speed = 500;

1秒が1000ミリ秒ですので、500ミリ秒は0.5秒のことですね。

「変数speedに0.5秒が代入」されました。

スムーススクロール

変数positionの位置まで、animate()メソッドを用いてぬるっとスクロールさせます。

ページスクロール用の特別なプロパティ「scrollTop」を使います。

// スムーススクロール
    $('html, body').animate({scrollTop: position}, speed, "swing");

セレクタが「’html, body’」と2つが指定されているのは、ブラウザによって解釈に違いがあるからです。

「animate()」では、引数で指定した位置まで要素をアニメーションさせることができます。

()内の引数は、1番目に{プロパティ: 値}、2番目にスピード、3番目に加速の種類と指定します。

「ブラウザの画面を、変数positionの位置まで変数speedの速度で徐々に加速しながら移動し、ゆっくり停止」と指定することができました！

サンプルがありますので、位置の調整やスピードを書き換えて試してみてください。

See the Pen smooth-scroll by spica (@spica_blog) on CodePen.

まとめ

jQueryはコピペで済ませている方も多いと思いますが、コードの意味を知ることは大切です。

うまく動かない時、カスタマイズしたい時に、思考停止せずに対処できるようになりましょう！

最初はチンプンカンプンだったけど、今はコードが読めるようになりました！

spica

すばらしい！
コピペするのもいいですが、自分でコードが書けるようになるともっと楽しくなりますよ！

JavaScriptの基本を勉強することで、jQueryの理解度が深まり、ありがたみも感じることができます（コードが短い！）。

ぜひ併せて勉強してみてくださいね！