ページ上部へのスムーズなスクロールを実現する3つの方法

背景

最近、会社の公開用H5を開発したのですが、アイコンをクリックすると一番上にスクロールする機能を作りました。機能の実装は比較的簡単で、直接window.scrollTo(0, 0)を呼び出す、1行のコードで完了します。しかし、街獅子である自分には、そんな低い要件ではどうにもならないので、ページをスムーズに上部にスクロールさせる機能を実現することを自分への要件に加えました。調べたり、ドキュメントを見たりして、以下の3つの選択肢を思いつきました。

1. CSSを使用する

機能を完成させるための最上位は、CSSだけで行っています。そのコードは以下の通りです。

html {
    scroll-behavior: smooth;
}

このスタイルの目的は、スクロールバーを持つ要素に対してスクロールの動作を指定することですが、ユーザーが手動で移動したとき、または CSSOM スクロール API がスクロールをトリガーしたときにのみ有効になり、ユーザーの操作によって発生するスクロールには影響を与えません。ちょうど祝杯をあげていた私は、can i useを開いて互換性を見てみました：。

ぐぬぬ、素直にJSで実装しよう。

2. Window.scrollTo APIを使用する

window.scrollTo(x, y)は、ドキュメントの x, y 軸座標を渡すことで、ページ上の特定の位置にスクロールすることは周知のとおりです。このAPIでは、実際にはオプション（x座標に対応するleft値とy座標に対応するtop値を持つオブジェクト）と、スクロールの動作をカスタマイズするためのビヘイビアを渡すことができ、これを利用して一番上までスクロールしています。

window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})

本当にいい匂いがする、出来上がり。数日後、プロダクトマネージャーが5mのナイフを持ってやってきて、Safariでのスクロール効果がおかしい、ボディチェックが極端に悪い、と言ってきた。そこで私は黙ってMDNドキュメントを開き、一番下までスクロールしてみました：。

この画像を見た後、APIブラウザはどれもかなり対応しているものの、Safariではoptionオプションがどうしてもハングしてしまうので、再度stackoverflowを開いて究極の解決策を結論づけました。

3. requestAnimationFrameの使用

有名なrequestAnimationFrameはよく見かけるのですが、なかなか使う機会がなかったので、この機会に試してみました。requestAnimationFrame の目的は、次の再描画の前に受信したコールバック関数を実行するようにブラウザに伝えることであり、ブラウザが自動的に行ってくれる動作であることは分かっています。そこで、次のようなコードがあります。

const scrollToTop = () => {
    let scrollTop = document.documentElement.scrollTo || document.body.scrollTop
    if (scrollTop > 0) {
        window.requestAnimationFrame(scrollTop)
        window.scrollTop(0, scrollTop - scrollTo / 8)
    }
}

完了!!!! 完璧だ!!! 喜びのあまり、requestAnimationFrameの互換性を確認するために使用することができますを開いた。

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。