Intersection Observer APIを使ってスクロールトップボタンを表示する

こんにちは、つるみなおや（@tsuruchan_web）です。

Intersection Observer APIを使ってスクロールトップボタンを表示するコードを作ったのでご紹介します。

スクロールトップボタンの表示・非表示はIntersection Observer APIを使ってフッター手前でスクロールトップボタンを固定するでも紹介していますが、今回はブログなどでファーストビューの画像がない場合の実装方法です。

画面トップから200pxの地点に透明な監視点を作り、それが画面外にいったらスクロールトップボタンを表示しています。

Intersection Observer APIでの判定要素がない場合は、scrollイベントで処理する方が自然かなとも思いましたが、処理が重くなってしまうとイヤなので、むりやり判定要素を作りました。

当サイトでも使っているコードで、コピペ可能なのでよかったら使ってみてください。

Intersection Observer APIを使ってスクロールトップボタンを表示する

See the Pen
スクロールトップボタン（ファーストビューなし） by つるみなおや (@trmnaoya)
on CodePen.

こちらが監視点のコードです。

<div id="js-scroll-top-observer" class="scroll-top-observer"></div>

そしてこちらが監視点のCSSです。

.scroll-top-observer {
    // background: transparent; 本来はこちら
    background: red;
    // height: 1px; 本来はこちら
    height: 10px;
    position: absolute;
    top: 200px; // 画面トップから200pxの位置で監視
    // width: 1px; 本来はこちら
    width: 10px;
}

この記事では監視点がわかりやすいように「10pxの赤色の正方形」にしています。実際にはコメントアウトしている「1pxの透明の正方形」にしてもらえればオッケーです。

以上です。

参考になれば幸いです。