下にスクロールしたら「ページトップへ戻る」を表示させたい
山崎講師ポイントは、24行目のaddEventListener(イベント,コールバック関数)という書き方です。
add(加える)Event(イベントを)Listener(聞くものを)ということでイベントを感知するメソッドであることを名前が表していますね。
今回はwindowオブジェクトにスクロールイベントを設定しています。
そしてスクロール量が1000を超えたら「▲TOPへ戻る」というページ内リンクの不透明度【opacity】を0.4にして見えるようにしています。
windowオブジェクトは、Webが表示されている画面そのもののことで、画面上に表示されているすべてのオブジェクトの親となるオブジェクトです。
コールバック関数とは、関数を引数として渡す仕組みです。
今回は無名関数として名前をつけずにそのまま処理を書いていますがこれもOKです。
なお、3枚の写真はloremPicsumを使ったダミーです。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>go-to-top.html</title>
<style>
#button {
position: fixed;
bottom: 15px;
right: 25px;
opacity: 0;
z-index: 9999;
}
</style>
</head>
<body>
<p>下にスクロールすると画面右下部に▲TOPへ戻るというページ内リンクが表示されます。</p>
<p><img src=https://picsum.photos/1000?random=1″></p>
<p><img src=https://picsum.photos/1000?random=2″></p>
<p><img src=https://picsum.photos/1000?random=3″></p>
<p><div id="button">
<a href="#top">▲TOPへ戻る</a>
</div>
<script>
// ユーザーがページをスクロールすると発火するイベントリスナーを追加します
window.addEventListener("scroll", function () {
// "#button"というIDを持つ要素をドキュメントから取得し、buttonという定数に保存します
const button = document.querySelector("#button");
// 現在のスクロール位置（ページの最上部からの垂直方向の距離）を取得します
const scroll = window.pageYOffset;
// スクロール位置が1000以上の場合、ボタンの透明度を0.4に設定します
if (scroll > 1000) {
button.style.opacity = 0.4;
} else
// スクロール位置が1000未満の場合、ボタンの透明度を0に設定します
button.style.opacity = 0;
});
</script>
</body>
</html>なお、イベントは以下が代表的です。
| イベント | 説明 |
|---|---|
| change | フォーム要素の選択、入力内容が変更された時 |
| select | テキストが選択された時 |
| load | ページや画像の読み込みが完了した時 |
| click | 要素やリンクをクリックした時 |
| keyUp | 押していたキーをあげた時 |
| mouseOver | マウスが乗った時 |
HTMLの属性として設定するonがついたイベントハンドラと比較するとaddEventListener()の方が複数のイベントを設定できるだけにより汎用的であるといえます。
