理解度を高めるために、このブログにメモとして残しています。
今回は、デイトラ初級編DAY21の②ページトップへ戻るボタンをつけるです。
・トップから80pxスクロールしたら、
・300ms（0.3秒）かけて
・フェードイン・フェードアウトで表示・非表示
・表示している間はボタンはページ右下に固定
・ボタンを押したら500ms（0.5秒）かけてページトップに戻る
🌸HTML
・footerの中にpagetopを入れた
・テキストは、pagetop-name (pagetop-textでも良かった…)
・fvに戻るので、aタグで囲う。
・headerにも、id=headerを設置。
🌸CSS
・position:fixed;で、ボタンを固定して調整。
・正円は、border-radius:50%
・text-align:center、line-height:50px（heightの高さと合わせる）で円の中央に。
・html、bodyに、animateで、scrollTop0まで500秒かけて移動
・windowがスクロールされたときに発火する
・windowのスクロール量がscrollTopから80pxを超えたら、
・if文で真偽。(表示・非表示に)
🌸参考にした記事
他の方の記事をとても参考にしたので、
自分で1から考えてやるとなると、もっと難しいんだろうなと思いました。💦
アドバイスなどあったらよろしくお願いします。💦
