【Vanilla JS】スクロール途中でPageTop（トップへ戻る）ボタンをフェードインで表示（Intersection Observer API使用）
[ ID : 6621 ]
実装目安
3分
概要
ページトップボタンをスクロールの途中で表示させる処理を、Intersection Observer APIを使用して実装する方法を紹介。用途・要件
- スクロールイベントを使用せず、Intersection Observer APIを使用。（ブラウザへの負荷軽減）
- 発火の閾値を調整するための要素を生成して追加。
- 発火の閾値はCSSで調整。(DEMOでは300pxに設定)
- 閾値までスクロールしたタイミングでページトップボタンにクラス(is-show)を付与し、ふわっとフェードで表示。
注意事項
- ページトップボタンのスムーススクロールは実装していません。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
