一定量スクロールすると表示されるページトップボタンをjQueryなしで実装したいなと思って調べていたら、ドンピシャな記事がありました。
[JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページトップへスムーススクロールで戻るボタンを作る ｜ memocarilog
こちらの記事を参考に、一定量スクロールした時に要素の表示・非表示を切り替える処理だけを実装したので、その内容を備忘録として残しておきたいと思います。
一定量スクロールすると要素をふんわり表示させる処理をjQueryなしで実装する方法
内部リンクのスムーススクロールについては別途実装済みの環境でしたので、スクロールでページトップボタンを表示させる処理のみを実装しました。
ページトップへ戻る時のスムーススクロールも併せて実装する場合は、上記memocarilogさんの記事を見ていただくか、こちらの記事をご参照ください。
書くまでもないかもですが、一応HTMLは以下のような感じです。
<div class="pagetop">
<a href="#page">ページトップへ</a>
</div>追加したJavaScriptは以下の通りです。これで、ページトップから300px以上スクロールされると.pagetopが出現し、300px未満では非表示になります。
<script>
//基本設定
let options = {
pageTopBtn : '.pagetop', //ページトップボタンのクラス名(IDでも可)
showScroll : 300, //ボタンを出現させるスクロール位置
fadeSpeed : 10 //早い 5〜30 ゆっくり
};
window.addEventListener('load', function() {
let btn = document.querySelector(options.pageTopBtn);
//フェイドインアニメーション設定
let fadeIn_timer;
function fadeInTimer(opaValue) {
if (opaValue < 1) {
opaValue = opaValue + 0.05;
btn.style.filter = 'alpha(opacity:"+(opaValue*100)+")';
btn.style.opacity = opaValue;
//opaValueが1になるまで透明度を0.05ずつ足して行く
//fadeSpeedに設定された時間毎に繰り返す
fadeIn_timer = setTimeout(function(){fadeInTimer(opaValue);}, options.fadeSpeed);
} else {
//opaValueが1になったら繰り返し処理を停止
clearTimeout(fadeIn_timer);
btn.style.filter = 'alpha(opacity:100)';
btn.style.opacity = 1;
}
}
//フェイドアウトアニメーション設定
let fadeOut_timer;
function fadeOutTimer(opaValue) {
if ( opaValue >= 0.05) {
opaValue = opaValue - 0.05;
btn.style.filter = 'alpha(opacity:"+(opaValue*100)+")';
btn.style.opacity = opaValue;
//opaValueが1になるまで透明度を0.05ずつ引いて行く
//fadeSpeedに設定された時間毎に繰り返す
fadeOut_timer = setTimeout(function(){ fadeOutTimer(opaValue); }, options.fadeSpeed);
} else {
//opaValueが0.05以下になったら繰り返し処理を停止
clearTimeout(fadeIn_timer);
btn.style.filter = 'alpha(opacity:0)';
btn.style.opacity = 0;
}
}
//スクロールイベント
btn.style.opacity = 0;
btn.style.filter = 'alpha(opacity:0)';
window.onscroll = function() {
var winSc = document.body.scrollTop || document.documentElement.scrollTop;
if(winSc >= options.showScroll){
clearTimeout(fadeOut_timer);
var opaValue = parseFloat(btn.style.opacity);
fadeInTimer(opaValue);
} else {
clearTimeout(fadeIn_timer);
var opaValue = parseFloat(btn.style.opacity);
fadeOutTimer(opaValue);
}
}
});
</script>基本設定で表示させたい要素のクラス名(もしくはID名)や表示するタイミングなどを環境に合わせて指定します。あとはそのままで大丈夫です。
memocarilogさんの記事では「window.onload = function()」が使われていますが、他と重複してしまって動かなかったので「window.addEventListener(‘load’, function()」に変えています。
あと、getElementByIdをquerySelectorに変えて、クラスとIDの両方に対応できるようにしました。
あとがき
フェードインとフェードアウトは、不透明度を少しずつ変化させて実現するんですね～。勉強になりました！
ちなみに、jQueryを使った方法については、「クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法」という投稿で紹介しています。