• HOME
  • Web制作
  • ページトップにもどるボタンjQueryのコードを解説

ページトップにもどるボタンjQueryのコードを解説

 
 

いわゆる「TOPに戻る」ボタンをjQueryで作りました。
(…と言っても参考にしたサイトがあるわけで…)
自分の勉強のためにも、コードを解説して覚えたいと思い、図解いたします。

今回のコードがこちら。

順番に解説していきます(自分に)。

まずは全体を二つにわけて解説

ページトップに戻る
ボタンのjsコードの全体像。

前半の要件定義&準備

変数定義、スクロール位置を取得するにはスクロール量を連続的に知る必要が。このケースで便利なのがscroll()イベント。セレクタには、画面のスクロール位置を取得するwindow。引数は省略可能で、その場合対象となる要素のスクロール位置を取得することができる

後半のメインの動き

paramsは変化させたい要素の プロパティ名:変化値。durationはアニメーションの動作時間。easingはイージング関数名の指定。callbackはアニメーション完了時に実行する関数を指定できる。

最後に

どうでしょう?
私の頭には、複雑なことは文字だけでは入ってこないので図にしてみました。
そしてそれをプリントしてじっくり眺めたいアナログ人間です。
(画面だけでは解析できません…)
この先頑張ってjavascriptをものにしていきたいと思います!

この記事もおすすめ