【脱jQuery】スクロールで出現するボタンをJavascriptのみで実装【コピペ】

こんにちは!フリーランスディレクター兼エンジニアののせっち@nosecchi01です引きこもりつつ、売上100万円/月ほどを上げつつ、生きています。

さて、先日『jQueryを使わず、Javascriptのみでトップへ戻る(スクロールトップ)ボタンを実装する方法』を紹介しました。

今回は、『スクロールで出現するボタンをJavascriptのみで実装』を実装する方法を紹介します。

この2つはセットで使われることがテッパンですね!

是非そちらの記事と合わせて確認してみてください。

目標物を確認

早速コードペンで見てみましょう!

See the Pen fadeIn/fadeOut on scroll by Yuki Nose (@yukinouz1) on CodePen.

前回解説した、『トップへ戻るボタン』も一緒に記載しています。

そちらの解説は前回の記事をどうぞ!

Javascriptの解説

HTML, CSSは基本的な事しか書いていないので、主にJavascriptを解説していきます。

まずは全体像を見てみましょう!

const pageTopBtn = document.getElementById('js-scroll-top');
window.addEventListener("scroll", () => {
  const currentY = window.pageYOffset;
  if ( currentY > 100){
    setTimeout(function(){
      pageTopBtn.style.opacity = 1;
    }, 1);
  } else {
    setTimeout(function(){
      pageTopBtn.style.opacity = 0;
    }, 1);
  }
});

ドットインストールの知識だけでできてしまいますね!

ポイントを解説

const pageTopBtn = document.getElementById('js-scroll-top');

 id=’js-scroll-top’を取得し、pageTopBtnに代入

const currentY = window.pageYOffset

垂直方向のスクロール量を返す。

if ( currentY > 100){
    setTimeout(function(){
      pageTopBtn.style.opacity = 1;
    }, 1);
  } else {
    setTimeout(function(){
      pageTopBtn.style.opacity = 0;
    }, 1);
  }

currentY > 100 つまり、スクロール量が100より大きいか、そうでないかで条件分岐します。

中身については先人の知恵をお借りしました!

JQueryをVanilla JSに緩やかに置き換える

https://qiita.com/nightyknite/items/668c112c40931515ed67

注意点として、僕の場合以下はCSSに書いています。

  • 最初非表示にするためのopacity: 0
  • ふわっと出現させる(消える)transition

具体的には下記です。

.scroll-top{
  opacity: 0; // 最初は非表示
  transition: opacity 350ms ease; // ふわっと
}

style.opacity = …の部分もcssで’.show’クラス等を作って、classList.add / removeとする方法でもOKです!

以上で解説は終了です!

Javascriptのおすすめ勉強法

学習サイトとしてはドットインストールがオススメです。

僕は基本Progate派なのですが、Javascriptに関してはドットインスールが最適です。

  • とにかく講座数が多い(課金は必須)
  • 実際にアプリを作りながら学べるので実践に近い
  • よく使う技術は何度も出てくるため、自然と覚えられる

Javascriptのオススメ書籍

Javascriptでオススメの書籍はこちらです。

正直内容はツマラナイのですが・・・。

タイトル通り「コードレシピ集」となっており、辞書的に使うのに最適です!

上記のドットインストールと合わせて使うことで、内容を補完し合えるのでオススメです。

まとめ

・Javascriptの基礎知識のみでできるので、学習がてら自分で書いてみるのに最適です。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!