スムーススクロールの実装 - ホームページとりびあ

1 はじめに
2 jQuery本体を読み込む
3 コード解説

はじめに

ページ内リンクをクリックしたとき、いきなりパッと移動するよりスルスルスル～と移動してくれたら気持ちいいですよね…

そんなスムーススクロールの実装方法をご紹介します。

jQuery本体を読み込む

設定は簡単！
<head></head>内に以下のjQueryコードを挿入するだけです！

まずは大元jQueryを読み込みます。
jQueryの読み込み方は「jQyeryの読み込み」をご覧ください。
jQueryの読み込みコードを入力し、その後にスクリプトを入力します。
先にjQUeryを読み込んでおかないとjQueryが動作しなので忘れないでください。

コード解説

スムーススクロールのjQueryコードは以下の通りです。

JavaScript

jQuery(function(){
  //#で始まるスタート地点をクリックしたときの処理
   jQuery('a[href^="#"]').click(function() {
      //スクロールのスピード
      var speed = 800;
      //スタート地点の値
      var href= jQuery(this).attr("href");
      //ゴール地点の値
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      //ゴール地点を数値として取得
      var position = target.offset().top;
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

こちらのコードでちょっとわかりにくいのがゴール地点の値を取得する以下のコードかと思います。

var target = jQuery(href == "#" || href == "" ? 'html' : href);

こちらは三項演算子で書かれています。
三項演算子の構文としては以下の通りです。

条件式 ? True : False

条件式がTrueならTrueの値、FalseならFalseの値となります。
これをif文に置き換えると次のようになります。

if (条件式) {
  Trueの値
} else {
  Falseの値
}

さらに、先ほどのゴール地点の値を取得する三項演算子を反映すると以下の通りとなります。

if(href == "#" || href == ""){
 target = $('html');//TOPへ
}else{
 target  = $('href');
}

変数hrefの値が＃もしくは空の場合は$(‘html’)のリンク（トップ）へ、そうでなければ$(‘href’)がゴール地点となります。
ゴール地点が決定したら、次は以下のコードでゴール地点を数値化して取得します。

var position = target.offset().top;

offset().top;はドキュメントの左上の起点から、要素の左上までの距離（数値）を取得するコードです。
ゴール地点の座標がわかれば次は、移動するだけです。

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

animate関数の仕様は以下の通りです。
.animate({変化させるCSSのキーと値のマップ値} ,[ スピード] ,[ イージングの種類] ),[アニメーションが完了した時に実行したい処理] )

スクロールのスピードは以下の通り、変数設定されています。

var speed = 800;

数字が大きくなるとゆっくりと、小さくなると速くなります。
スピードの調整はこちらで設定してください。

See the Pen Untitled by denet-tech (@denet-tech) on CodePen.

以上でスムーススクロールの設定は完了です。