Intersection Observerで、少しスクロールしたら現れるヤツ

前回の続き。
JavaScriptとcssで要素をふわっと表示させるアニメーション : Intersection Observer
のOGP画像
引き続き、JavascriptのIntersection Observer APIを使って、少しスクロールしたら右下からぴょこんと現れるヤツを作りたいと思います。「トップへ戻る」ボタンなどに使えます。

「少しスクロールしたら」とは、「スクロール位置がヘッダーより下になったら」という定義で進めたいと思います。
スクロールした方、右下にサンプルの亀が現れているでしょうか。

HTML

<button id="totop">トップへ</button>

CSS

#totop{
	position:fixed;
	right:10px; bottom:-300px;
	transition:bottom 1s;
}#totop.active{
	bottom:10px;
}

position:fixed;で、transitionでアニメーションをつけてます。位置の数字はお好みで変更してください。
通常は画面の300px下に隠れていて、activeクラスが付くと画面内に現れます。

JavaScript


const header = document.querySelector('header'),
		totop = document.getElementById('toTop'),
		options = {
			root : null,
			rootMargin : "0px 0px 0px 0px",
			threshold: 1.0
		};

const observer = new IntersectionObserver((entries) => {
	for(const e of entries) {
		if(e.isIntersecting) {
			totop.classList.remove('active');
		} else{
			totop.classList.add('active');
		}
	}
}, options);
observer.observe(header);

headerを監視して、画面外に出たら#totop要素にactiveクラスをつけるということをしてます。
optionsは、今回は初期値なんですが、例えば「ヘッダーを半分通過したら」などいろいろ指定することができます。

参考サイト

Intersection Observer API (MDN WEB DOCS)　

オレンジになった亀