Pure JS数行で、フェードインのスクロールボタンを実装しよう

このテーマについて書こうを思ったきっかけ

jQueryを使えば、巷にはたくさん参考記事があるが、「jQuery」を使いたくない場面もままある。
そんな時に参考になる記事が少なく、手間取ったため、ここに記事を書くことになった。

実装する前に、実装イメージを

シンプルに考えれば、例えば画面を100pxスクローしたときにフェードインさせるためには
ボタンとなる要素において、
・出現用のクラスをスクロール量が100pxを超えた時につける
・出現用のクラスをスクロール量が100px未満の時に外す
・出現用のクラスにopacityが1のCSSを記述
・出現用のクラスがついていないとき、opacityが0のCSSを記述
すれば、実装できそうである。

実装してみる

上のプロセスで実装できた！

html

<div href="" class="arrow-for-scrolling-top" id="js-scroll-top">
    <span class="arrow"></span>
</div>

css

div.arrow-for-scrolling-top {
    opacity: 0; /* 完全に透明 */
    transition: 1s; /* ゆっくり透明にする */
    -webkit-transition:1s;
    -moz-transition:1s;
    -ms-transition:1s;
    -o-transition:1s;
    background-color: #0367d6;
    color: #fff;
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
div.arrow-for-scrolling-top.show {
        opacity: 1; /* 完全に出現させる */
        transition: 1s; /* ゆっくり出現させる */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
}
span.arrow {
        width: 10px;
        display: inline-block;
        height: 10px;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        position: absolute;
        top: 56%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
        -o-transform: translate(-50%, -50%) rotate(45deg);
}

js

  const PageTopBtn = document.getElementById('js-scroll-top')
  // 以下で、「ボタンをクリックした時に、画面トップに移動させる」を実現
  PageTopBtn.addEventListener('click', (e) => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  // 以下で、「スクロール量によってクラスのつけはずし」を実現
  window.addEventListener('scroll', function () {
    const y = document.documentElement.scrollTop // get the height from page top
    if (y < 100) {
      // スクロール量が100未満の時、ボタンの「show」というクラスを外す
      PageTopBtn.classList.remove('show')
    } else if (y >= 100) {
      // スクロール量が100以上の時、ボタンに「show」というクラスをつける
      PageTopBtn.classList.add('show')
    }
  })

できましたかね？
お疲れ様です！！
ご要望、ご質問などございましたら、
Twitter
こちらにお願いします！