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

こんにちは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;
}

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

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

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

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

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

の部分は

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

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

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

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

ここが重要です。

const scroll = window.pageYOffset;

pageYOffsetとは

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

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

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

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

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

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

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

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

解説は以上になります。

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

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

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

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

まとめ

スクロール量の指定をいじるだけで、jQueryの読み込み必要なく、コピペで実装できるし、
結構いろんなところで使うので、是非覚えておいてください。

また、プログラミングの学習を効率的にするなら独学よりもスクールで学ぶのがオススメです。

DMM WEBCAMPはプランが合わなくても８日間の無条件返金保証や、

早期で学習を終えた場合の未利用期間返金保証などがあり安心です。

最大１時間の無料相談が可能なので一度話を聞いてみるのもアリですね！