ページを先頭までスムーズにスクロールする機能を実現する3つの方法を詳しく解説

最近、開発会社の公開アカウントH5にアイコンをクリックすると上部までスクロールする機能が追加されました。この関数の実装は比較的簡単で、window.scrollTo(0, 0) を直接呼び出して 1 行のコードで完了します。しかし、攻城戦のライオンとして、自分自身に対する要件がそれほど低いはずがないため、ページをトップまでスムーズにスクロールする機能を実現するという自分自身への要件を追加しました。調査とドキュメントの検討の結果、次の 3 つの選択肢があります。

最高レベルの機能は、CSS のみを使用して実現できます。コードは次のとおりです。

 html { スクロール動作: スムーズ;}

このスタイルの機能は、スクロール バーのある要素のスクロール動作を指定することですが、これはユーザーが手動で移動するか、CSSOM スクロール API がスクロールをトリガーする場合にのみ有効であり、ユーザーの動作によって引き起こされるスクロールには影響しません。ちょうどお祝いをしていたときに、「can i use」を開いて互換性を確認しました。

くそー、JS で実装しましょう。

window.scrollTo(x, y) は、ドキュメント内の x 軸と y 軸の座標を渡すことによって、ページ上の特定の位置までスクロールする機能を実現していることは誰もが知っています。実際、この API は、オブジェクトであるオプションを渡すこともできます。左側の値は座標の x に対応し、上部は座標の y に対応します。また、動作の値もあり、これにより次のことが可能になります。スクロール動作をカスタマイズするには、次のようにスクロールを実装します。

 window.scrollTo({ 左: 0、上: 0、動作: 'スムーズ'})

いい香りがしてきました、完成しました。数日後、製品マネージャーが 5 メートルの剣を持って私のところに来て、Safari のスクロール効果が奇妙で、身体検査の結果が非常に悪いと言いました。そこで私は黙って MDN ドキュメントを開き、一番下までスクロールしました。

この写真を見ると、APIブラウザはほぼサポートされているものの、Safariではoptionオプションが直接ハングしてしまうため、再度stackoverflowを開いて究極の解決策をまとめました。

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

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

終わり！ ！ ！完璧！ ！ ！興奮しながら、 requestAnimationFrame の互換性を確認するために使用できますか? をオンにしました。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。