javascript WEBデザイン

jQueryいらずのsmooth-scroll.jsで簡単「トップに戻る」ボタン、さらにフェードイン/アウトも

smooth-scroll.jsの使い方と、さらにボタンのフェードイン/フェードアウトについても解説します。

jQueryいらずで「トップに戻る」ボタンなどでよく使うスムーススクロールを簡単に実装できる「smooth-scroll.js」の使い方について解説します。さらにスクロールに合わせてボタンのフェードイン/フェードアウトも実装していこうと思います。

最終的な完成形のサンプルです。

smooth-scroll.js + フェードイン/フェードアウト サンプル

「smooth-scroll.js」の使い方

「smooth-scroll.js」のダウンロード

「smooth-scroll.js」を利用するためには、smooth-scroll.jsのgitHubからソースを落としてくるか、CDNを利用します。

githubは利用する場合はサイトの[Code]のところから[Download ZIP]を選ぶとsmooth-scroll.jsのソースがダウンロードされます。使用するファイルは[dist]フォルダ以下の[smooth-scroll.polyfills.min.js]になります。

CDNもgithubに書いてあるので、コピーして使用してください。

smooth-scroll.js CDN

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

smooth-scroll.js gitHub

「smooth-scroll.js」の設定

var scroll = new SmoothScroll('a[href*="#"]', {
    speedAsDuration:true,
    speed:1000,
});

これが「smooth-scroll.js」の基本形です。これをjsファイルとしてHTMLに読み込めばスムーススクロールが実装されます。

パラメータの設定

まず[speedAsDuration]ですが、「true」にすると一定の速度でのスクロールになり、「false」にするとスクロールの速度に強弱が付くようになります。後ほど説明しますが[easing]の設定をする場合には、[speedAsDuration]の設定を「false」にしておきましょう。

[speed]は1000pxのスクロールにかかる時間をミリ秒単位で表した数値です。単位はミリ秒なので[speed]を「1000」と設定すると、1秒で1000pxスクロールするという意味になります。

[easing]の設定も可能です。

[easing]を設定した場合の書き方は以下のようになります。

var scroll = new SmoothScroll('a[href*="#"]', {
    speedAsDuration:false,
    speed:500,
    easing:'easeInOutQuint' 
});

[easing]を設定する場合は、先にも書きましたが[speedAsDuration]falseにしてください。trueにするとeasingがききません。利用できるeasingの種類についてはsmooth-scroll.jsのgitHubで確認できます。

javascriptのコードの['a[href*="#"]']の部分についてですが、これは「#を含むリンク」という意味になります。つまりhtml内のリンクで「#」の文字がリンクの文字に含まれていれば自動的にsmooth-scrollが適応されます。

ボタンをスクロールに合わせてフェードイン/フェードアウトさせる

次にボタンにスクロールに合わせてフェードイン/フェードアウトさせる機能をつけてみます。

最終的な[HTML][CSS][Javascript]は以下になります。

[HTML] 一部抜粋

~省略~

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="wrap">
        <div id="top"></div>
        <img src="img/20211112smooth-scroll-sample-img01.jpg" alt="">
        <p>
            Lorem Ipsum is simply dummy text of the

~省略~

           the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
    </div>
    <div class="page-top-btn" id="scroll-fadein"><a href="#top"><img src="img/pagetop.png" alt=""></a></div>
</html>

[CSS] 一部抜粋

.page-top-btn {
  position: fixed;
  bottom: 50px;
  right: 50px;
}

#scroll-fadein {
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}

#scroll-fadein.fadein {
  visibility: visible;
  opacity: 1;
}

[Javascript]

window.addEventListener('DOMContentLoaded', function() {

// smooth-scroll
var scroll = new SmoothScroll('a[href*="#"]', {
  speedAsDuration: false,
  speed: 300,
  easing: "easeInOutQuad",
});

// button fadeIn/fadeOut
var topButton = document.getElementById("scroll-fadein");

window.addEventListener("scroll", () => {
    const pageY = window.pageYOffset;
    if(pageY > 500) {
        topButton.classList.add("fadein")
    }else {
        topButton.classList.remove("fadein");
    }
})

})

HTML / CSS

<div class="page-top-btn"~></div>の部分が「トップに戻るボタン」です。

cssについては、クラス[.page-top-btn]で「トップに戻るボタン」のデザインを調整しています。スクロール時のフェードイン/フェードアウトに関してはid「#scroll-fadein 」、クラス「.fadein」で管理しています。

通常時(スクロールさせる前)は[visibility: hidden][opacity: 0]でボタンを消しています。スクロールするとボタンにクラス「.fadein」がついて[visibility: visible][opacity: 1]でボタンを表示させるという感じです。

ボタンのフェードイン/フェードアウトがアニメーションで表現されるように[transition: .5s]を設定しています。

Javascript

一行目の[window.addEventListener('DOMContentLoaded', function()~]の部分は説明しだすと長くなってしまうので、気になる方は以下のページを参照してもらうと分かりやすいかと思います。

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは

ボタンのフェードイン/フェードアウト処理について説明します。

まずフェードイン/フェードアウトさせるボタンを指定します。

var topButton = document.getElementById("scroll-fadein");

そして

window.addEventListener("scroll", () => {
    const pageY = window.pageYOffset;
    if(pageY > 500) {
        topButton.classList.add("fadein")
    }else {
        topButton.classList.remove("fadein");
    }
})

ここの部分で指定したボタンのフェードイン/フェードアウトの処理をしています。

具体的に言うと、

もし500px以上ページがスクロールしたら、ボタンにクラス[.fadein]をつける。スクロールが500px以下ならクラス[.fadein]をはずす

という処理になっています。

500pxを境にクラス[.fadein]を付けたり外したりすることで、ボタンをフェードイン/フェードアウトさせています。

[window.pageYOffset]は垂直方向のスクロール量を返すプロパティです。

[(pageY > 500) ]の500の部分は変更すれば任意の位置でボタンのフェードイン/フェードアウトさせることができます。

smooth-scroll.js + フェードイン/フェードアウト サンプル

脱初心者、中級者プログラマー、WEBデザイナーにUdemyがオススメです

脱初心者を目指しているプログラマー、WEBデザイナーの方にUdemyがオススメです。 もちろんプログラマー、WEBデザイナー以外にも3DCGデザイナー、CGデザイナーの方にもオススメです! これまで自 ...

続きを見る

ドロワーメニューをjQuery / javascriptのみで作る

よく使うドロワーメニューをjQueryまたは、javascriptのみで作ってみます。 目次ベースのHTML/CSSjQueryで書いた場合javascriptで書いた場合 ベースのHTML/CSS ...

続きを見る

【ブラック回避】求人票からみるブラックWEB制作会社の見分け方

・ブラックWEB制作会社の見分け方はあるの?・求人票で注意して見るべきポイントは? そんな疑問にお答えします。 私は、これまでWEB制作会社を2社経験しており、そのうちの1社では採用担当をしていました ...

続きを見る


-javascript, WEBデザイン

© 2021 MUKOLOG