(Sample)

ポイントは、addEventListener(イベント,コールバック関数)という書き方です。

add(加える)Event(イベントを)Listener(聞くものを)ということでイベントを感知するメソッドであることを名前が表していますね。

今回はwindowオブジェクトにスクロールイベントを設定しています。

そしてスクロール量が1000を超えたら「▲TOPへ戻る」というページ内リンクの不透明度【opacity】を0.4にして見えるようにしています。

windowオブジェクトは、Webが表示されている画面そのもののことで、画面上に表示されているすべてのオブジェクトの親となるオブジェクトです。

コールバック関数とは、関数を引数として渡す仕組みです。

今回は無名関数として名前をつけずにそのまま処理を書いていますがこれもOKです。

なお、3枚の写真はloremPicsumを使ったダミーです。

CSS部分

CSS部分

      #button {
        position: fixed;
        bottom: 15px;
        right: 25px;
        opacity: 0;
        z-index: 9999;
        transition: opacity 0.3s;
      }

      html {
        scroll-behavior: smooth;
      }
  • #button: ボタンのスタイルを設定。
    • position: fixed;: ボタンを固定位置に設定し、スクロールしても動かないようにする。
    • bottom: 15px;: 画面下から15ピクセルの位置に配置。
    • right: 25px;: 画面右から25ピクセルの位置に配置。
    • opacity: 0;: 初期状態ではボタンを透明に設定。
    • z-index: 9999;: ボタンが他の要素の上に表示されるように設定。
    • transition: opacity 0.3s;: 不透明度が0.3秒で変化するように設定。
  • html { scroll-behavior: smooth; }: スムーズスクロールを有効にする。

<body>セクション

    <p id="top">
      下にスクロールすると画面右下部に▲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>
    <div id="button">
      <a href="#top">▲TOPへ戻る</a>
    </div>
  • <p id="top">: ページ上部に戻るリンクのアンカーとして機能する要素。
  • <p><img src="https://picsum.photos/1000?random=1" /></p>: ランダムな画像を表示する。
  • <div id="button">: ボタンを包含する要素。
    • <a href="#top">▲TOPへ戻る</a>: 「▲TOPへ戻る」リンク。

JavaScript部分

      window.addEventListener("scroll", function () {
        const button = document.querySelector("#button");
        const scroll = window.pageYOffset;

        if (scroll > 1000) {
          button.style.opacity = 0.4;
        } else {
          button.style.opacity = 0;
        }
  • window.addEventListener("scroll", function () {...});: スクロールイベントを監視する。
    • const button = document.querySelector("#button");: ボタン要素を取得。
    • const scroll = window.pageYOffset;: 現在のスクロール位置を取得。
    • if (scroll > 1000) {...} else {...}: スクロール位置が1000ピクセル以上ならボタンの不透明度を0.4に、それ以下なら0に設定。

なお、イベントは以下が代表的です。

イベント説明
changeフォーム要素の選択、入力内容が変更された時
selectテキストが選択された時
loadページや画像の読み込みが完了した時
click要素やリンクをクリックした時
keyUp押していたキーをあげた時
mouseOverマウスが乗った時

HTMLの属性として設定するonがついたイベントハンドラと比較するとaddEventListener()の方が複数のイベントを設定できるだけにより汎用的であるといえます。

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる