Webサイトを訪れた際に、「上（トップ）に戻るボタン」を見たり、利用したことがある人は多いと思いますが
今回は、そのボタンをコーディングしていく方法を解説していきます。
初めてJavaScriptを学習する人にとっては、分からない概念が2つ、3つ出てくるかもしれませんが（僕も諦めかけたことがあります。笑）
慣れてくればそこまで難しくないので、初心者の方もぜひチャレンジしてみてください！
コードと実装結果は、以下の通りです。
See the Pen あるスクロール量を超えたら表示される上に戻るボタンの実装 by わい (@y_programing) on CodePen.
縦に長い、背景が灰色のボックスは、縦スクロールができれば良いという感じで作成したのでけっこう適当です。
それと分かりにくいかもしれませんが、ユーザが「上に戻る」ボタンの位置まできたらふわっと表示させています。
それでは、細かい部分を解説していきます。
スクロールした時の処理を書く場合はaddEventListener( ‘scroll’, function () {});
今回は、ただ「上に戻る」ボタンを作るだけではなく、（縦方向に）ある一定量までスクロールした際に、ボタンをうにょ！っと出すという処理をしてます。
スクロールした際の処理を書く場合には、addEventListenerでscrollイベントを取得します。
addEventListenerは、イベントを追加する際に使用します。
addEventListener( ‘a’ , ‘b’ ); のように第1引数と第2引数をとります。
で、スクロールした際の処理だから、scrollイベント。覚えやすいですね！
イベント名は、第1引数に入れます。そして、第2引数には関数を入れる。
だから、今回の場合は
addEventListener( ‘scroll’ , ‘function () {}’ );
の形になるわけですね。
縦方向にどれだけスクロールしたかを取得するには、window.scrollY
縦方向にどれだけスクロースをしたのかを取得するには、window.scrollYを利用します。
これを
const scroll = window.scrollY;として、scrollという変数に入れてあげます。
そして、今回は縦方向に100の値、スクロールしたら「上に戻る」ボタンを表示させたいのですが
この場合は、条件分岐（if）を利用します。
if (scroll > 100) {
document.getElementById('go_top').classList.add('visible');
} else {
document.getElementById('go_top').classList.remove('visible');
}縦方向に100の値、スクロールをしたら ‘go_top’ というidをつけたaタグ（上に戻るボタン）に ‘visible’ というclassを付ける。
そうでなかったら、 ‘go_top’ というidをつけたaタグ（上に戻るボタン）から ‘visible’ というclassを消す。
そういう処理を書いています。
そして、 ‘visible’ というクラスが付いた時はvisibility: visible; が付与されるのでボタンが表示され
‘visible’ というクラスが消えた時はvisibility: hidden; が付与されるのでボタンの表示も消えます。
#go_top {
visibility: hidden;
}
#go_top.visible {
visibility: visible;
}こういった処理を関数の中( function () {} の波かっこの中)に書いているんですね。
ちなみに、予想できた方もいるかもしれませんが
縦方向にどれだけスクロースをしたのかを取得するには、window.scrollYですが
横方向にどれだけスクロースをしたのかを取得するには、window.scrollXです。
また、関数内に、console.log(scroll); の処理を書いてあげて検証ツールでConsoleの欄を見ながらスクロールすると
どれだけスクロールされたかが数値として表示されるので、気になった人はやってみてください。
最後に
ということで、今回はjavaScriptを利用して、ある位置までスクロールしたら「上に戻る」ボタンを出現させる方法について解説していきました。
今後も、こういったコーディングやWordPressなどに役立つ情報を発信していこうと思いますので
次回の記事もぜひみてみてください！
お勧めの記事
＼ 最新情報をチェック ／
コメント