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 + フェードイン/フェードアウトサンプル

JavaScriptコードレシピ集

posted with ヨメレバ

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

楽天ブックス

Amazon

Kindle

: ドロワーメニューをjQuery / javascript(Vanilla JS)のみで作る

ベースのHTML/CSS よく使うドロワーメニューをjQueryを使って作成してみます。また、jQueryを使わずjavascriptのみで全く同じドロワーメニューを作成してみます。今回作成するもの ...

続きを見る

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

そんな疑問にお答えします。私は、これまでWEB制作会社を2社経験しており、そのうちの1社では採用担当をしていました。その経験と、同じ業界にいる友人、知人の体験、実情を踏まえて「求人票からみるブラック ...

続きを見る