はじめに
脱jQueryしていきたいのでだんだんと素のjavascriptで書いていくようにしていると段階です。
備忘録がわりです。復習を兼ねて１つ１つ解説入れていこうと思います。
対象
駆け出しエンジニアの方や学生,jQueryに頼りっぱなしが嫌な方。
ソースコード
main.js
// トップへ戻るボタンfunctionscrollTop(el,duration){lettarget=document.getElementById(el);// elと名付けたドキュメント要素を取得し、変数に格納するtarget.addEventListener('click',function(){letcurrentY=window.pageYOffset;// クリック時の縦方向へのスクロール量を取得letstep=duration/currentY>1?10:100;// 三項演算子で10or100を変数step（１回分のスクロール量）に格納lettimeStep=duration/currentY*step;// 1回のスクロールにかかった時間を格納letintervalID=setInterval(scrollUp,timeStep);// scrollUp()を一定時間ごとに繰り返す // scrollUp()で一定時間ごとに繰り返される関数functionscrollUp(){currentY=window.pageYOffset;if(currentY===0){// 垂直方向へのスクロール量が0になったらclearInterval(intervalID);// 処理を停止する}else{scrollBy(0,-step);// スクロールした分だけY軸方向へ戻る}}});}scrollTop('top-button',ページトップに到達する時間); //関数を呼び出すindex.html
<divid="top-button"><divclass="arrow">divでボタンを作る</div></div>解説
'top-button'とidで指定されたHTMLドキュメントをクリックしたら、クリックした時点でのスクロール量を取得し、そのスクロール量に応じて速度を場合分けして、ページのトップまでY軸方向へ戻るという処理。
setInterval(),clearInterval()
ここうまく説明できないけど、setInterval()をclearInterval()で包んで、ページのトップまでいったら処理を止めるイメージ
let step = duration/currentY > 1 ? 10 : 100;
三項演算子
if (条件式) {
//Trueの処理
} else {
//Falseの処理
}
条件式 ? Trueの処理 : Falseの処理
上の２つは同じ意味。複雑になると推奨されないらしいです。
今回ではduration/currentYの値が1より大きかったら10,1以下だったら100を変数stepに格納するという処理ですね。
おわりに
勉強になりました。より良くなると教えてくれる方ぜひ教えてください。