Intersection Observer APIを使ってフッター手前でスクロールトップボタンを固定する
こんにちは、つるみなおや（@tsuruchan_web）です。
Intersection Observer APIを使ってフッター手前でスクロールトップボタンを固定するコードを作ったのでご紹介します。
今までは「ページ全体の高さを計算して〜、フッターの高さを計算して〜、そこまでのスクロール量を計算して〜」と、かなり多くの処理を記述していましたが、Intersection Observer APIを使うことで、もっと簡単に記述できるようになります。
さらにIntersection Observer APIは「ある要素が表示画面内にあるかどうか」で処理を行うことができるので、スクロール量に依存せず、処理が軽くなります。
今回は「フッターの20px手前の地点が画面内に入ったら、そこでスクロールトップボタンを固定する」という実装です。
ついでに「ファーストビューが画面外にいったらスクロールトップボタンを画面右下に表示する」という処理も実装しています。
ボタンの色や大きさを調整するだけで、スクロールトップボタン関係の実装は今回のコードだけでオッケーだと思います！
コピペ可能なのでよかったら使ってみてください。
Intersection Observer APIを使ってフッター手前でスクロールトップボタンを固定する
「スクロールトップボタンの表示・非表示」と「スクロールトップボタンをフッター手前で固定する」の二つのインスタンスに分けて実装しています。
IntersectionObserverクラスのメンバ関数observeの引数に「フッターの20px手前の地点が画面内に入ったら」というオプションを加えています。
See the Pen
スクロールトップボタン（ファーストビューあり） by つるみなおや (@trmnaoya)
on CodePen.
以上です。
Intersection Observer APIは使いやすいのでぜひ使ってみてください！
参考になれば幸いです。
