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

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

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

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

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

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

【脱jQuery】Javascriptのみでトップへ戻るボタンを実装【コピペ】

jQueryを使わずにJavascriptのみで「トップへ戻る」ボタンを実装する方法を解説しています。要素ごとに細かく分解して解説しているので、Javascript初心者の方にもオスス…

flex-box.net

目標物を確認

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

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

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

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

【脱jQuery】Javascriptのみでトップへ戻るボタンを実装【コピペ】

jQueryを使わずにJavascriptのみで「トップへ戻る」ボタンを実装する方法を解説しています。要素ごとに細かく分解して解説しているので、Javascript初心者の方にもオスス…

flex-box.net

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に書いています。

具体的には下記です。

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

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

以上で解説は終了です！

Javascriptのおすすめ勉強法

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

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

ドットインストール

HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくこ…

dotinstall.com

Javascriptのオススメ書籍

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

JavaScriptコードレシピ集

posted with ヨメレバ

池田泰延/鹿野壮 技術評論社 2019年02月

楽天ブックス

楽天kobo

Amazon

Kindle

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

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

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

まとめ

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