【JavaScript】if文でTOPへ戻るボタン
トップへ戻るボタンを習ったので復習しながら解説します。
HTML
|
1 |
<p class="gotop">TOPへ戻る</p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.gotop{ position: fixed; /*表示場所を固定*/ right: 10px; bottom: 10px; opacity: 0; transition: all .5s; } .is-show{ opacity: 1; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる window.addEventListener("scroll", function(){ let scl = window.pageYOffset; //スクロール量を取って変数に代入 if( scl > 200 && scl <= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する }else if( scl > 500 ){ //もしスクロール量が500より大きいなら（おまけです） gotop.innerHTML = "TOPへ戻ろうよ！"; //要素の中身を変える(おまけです） } }); |
JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単なクリックゲームなどを作りました。バイト先でもJavaScriptが使えるようになりたいので奮闘しています。