【JS】スクロールしたら要素を表示させる

2024 4/11

2022年7月25日 2024年4月11日

こんにちはtakosanです。

今回はスクロールすると表示されるボタンの作り方を解説します。

Web制作などでページをある程度スクロールしたらTOPに戻るボタンをふわっと表示させたい、
みたいな要望って結構あると思います。（実際に制作した経験あります）

この記事ではそういったスクロールに応じて表示される要素の作り方を、

jQueryを一切使わず、純粋なJavaScriptのみで対応する方法をお伝えします。

できるだけ丁寧な解説にしてみましたので最後まで読んでいただけるとありがたいです。

完成したサンプル

まずは完成品から見ていただきましょう。
のちほど解説します。

See the Pen Untitled by yukiwebcreate (@Yukiwebcreate) on CodePen.

コード解説

まずはhtmlとCSS部分を整理。

<div class="container">
  <a href="#" class="elm">TOP</a>
</div>

.container{
      height: 2000px;
    }
.elm{
      text-decoration: none;
      background-color: #0032D6;
      position: fixed;
      bottom: 30px;
      right: 30px;
      padding: 20px;
      color:#fff;
      transition: .2s;
      opacity: 0;
      z-index:-1;
}

この部分では、高さをもつcontainerと、
スクロール後に表示したいボタンを用意しています。

そして今回の肝となるJSの部分が↓です。
少しずつ解説していきます。

window.addEventListener("scroll", function () {
  const elm = document.querySelector(".elm");
  const scroll = window.pageYOffset;
  if (scroll > 500) {
    elm.style.opacity = "1";
    elm.style.zIndex = "1";
    // console.log(scroll);
  } else {
    elm.style.opacity = "0";
    elm.style.zIndex = "-1";
    // console.log(scroll);
  }
});

まず最初に見慣れてないものだったらすみませんが

window.addEventListener("scroll", function () {

の部分は

scrollというイベントの発生に応じて、以降のプログラムが動きますよ、という宣言のようなものになります。

そしてその次には、要素elm（表示/非表示をしたい要素）を定義します。

const elm = document.querySelector(".elm");

そのあと、const scrollで scrollという名前の変数を用意し、pageYOffsetを入れています。

ここが重要です。

const scroll = window.pageYOffset;

pageYOffsetってなんや？

pageYOffsetとは

ページ全体のスクロール量を返すものです。

offsetには、基準の位置からズレるといった意味があるので、

つまりこの場合はY(縦)方向に最初の位置からどれくらいズレたのか、という値が入るわけです。

さて、そのpageYOffsetを使うことで
scroll変数にページのスクロール量を入れることができたので、

if (scroll > 500) {
    elm.style.opacity = "1";
    elm.style.zIndex = "1";
    // console.log(scroll);
  } else {
    elm.style.opacity = "0";
    elm.style.zIndex = "-1";
    // console.log(scroll);
  }

if文を使ってスクロール量が指定のpx以上の時だけ、ボタンを表示させるように分岐を書いています。
指定のpx以下であれば非表示にするので、その条件はelseに書き込んでおきます。

これだけでスクロールに応じて表示される要素の実装ができました！

ちなみに今回の場合は、最初にアクセスされた時、ページの一番上を見ているはずなので、
「TOPへ戻るボタン」のopacityの初期値は”0″にしてあります。

また、要素(elm)が非表示の時、透明の要素がクリックできてはいけないので、z-indexは-1を初期値とし、スクロールされて要素が表示された場合のみ、z-indexを1として、表に出てくるようにしております。

解説は以上になります。

もしよければコメントアウトしているconsole.logを解除して、表示される値を確認してみてください。

また、余談ですが、IEのことを考慮しなくていいなら

pageYOffsetをscrollYに置き換えてもらっても構いません。

https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY