【JS初心者向け】スムーススクロールJSを分解して説明

今回JQuery初心者の社員のためのJQuery講座ということで社内共有したものです。
いまだにJQueryかよと思う方いらっしゃるかと思いますが、運用している案件ほぼほぼJQueryのためお許しください（；＿；）

.js

$('a[href^="#"]').on('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;
});

よくあるコードです。

普段頻繁に使っているが、コードの意味を理解している人は少ないと思うので分解して説明します。

##$('a[href^="#"]')
「^=」はビット排他的論理和演算子。

JQueryの構文の１つ　$('[ 属性 ^= "値" ]')

指定した"値"が属性の値と前方一致する要素を選択する

つまり上記のコードの場合

aタグのhref属性の内容の前方に#が付いている要素を取得する。

##var speed = 500;
speedに500を代入。

変数に入れた方がのちのち管理しやすいので推薦されている。

##var href = $(this).attr('href');
$('a[href^="#"]')　で取得した内容の属性の中身を取得
<a href="#section1">なら「#section1」）してhrefに代入

##var target = $(href == '#' || href == "" ? 'html' : href);
まず**「||」は論理演算子**。
意味はor。左辺及び右辺のどちらか1つでもtrueだった場合に全体の式がtrueになる。

「?」は三項演算子。
if文のショートカットとしてよく用いられる。

(例)

.js

var number = 10
console.log((number > 11) ? 'big' : 'small' );

結果：falseがかえるのでsmallが出力

つまり、var target = $(href == '#' || href == "" ? 'html' : href);は下記と同じ意味を持つ

.js

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

そのことからhrefが#の時と空の時は$('html')が、それ以外は$(href)がtargetに代入される。

##var position = target.offset().top;
offset().top;はドキュメントの左上の起点から、要素の左上までの距離（数値）を取得し、positionに代入。

あくまでpositionにはいるのは数値。

$('body,html').animate({scrollTop: position}, speed, 'swing');
先に変数に代入してきた値をここで使う。

animate関数は下記の意味

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

参考:http://js.studio-kingdom.com/jquery/effects/animate

##return false;
処理を中断。

この関数の場合は大丈夫だが、リンク先に飛ばされる可能性を防ぐために書いている。

##まとめ
aタグのhref属性の内容の前方に#が付いている要素を取得し、それをクリックした時、
ドキュメントの上から、position分、speedの速さで、イージングの'swing'を使用してスクロールさせるクリックイベント。
コピペでもしっかり意味を理解して使いましょう。