トップに戻るためのreactの実装方法-フロントエンドQ&A-php.cn

トップに戻るためのreactの実装方法

藏色散人

リリース： 2022-12-30 10:29:02

オリジナル

3045 人が閲覧しました

React は先頭に戻るメソッドを実装します: 1. 機能コンポーネント「ScrollDemo.js」を作成します。 2. ボタンを作成し、コード「function handleScroll(){document.body.scrollTop = document」を渡します。 .documentElement .scrollTop = 0;}」を使用して、先頭に戻る効果を実現します。

トップに戻るためのreactの実装方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で先頭に戻る方法は?

知識の準備:

scrollTop は、コンテンツ領域の上に隠れているピクセル数を表します。要素がスクロールされない場合、scrollTop は 0 です。要素が垂直方向にスクロールする場合、scrollTop の値は増加します。

対象の効果:

「トップに戻る」ボタンをクリックして戻りたい場合scrollTopが0の場所を先頭にすることもできます。

トップに戻るためのreactの実装方法

機能コンポーネント ScrollDemo.js を作成しましょう。そして、クリックされたときに HandleScroll メソッドを呼び出すボタンの中にキーコードを記述します。ボタンの位置を修正

<button
                onClick={handleScroll}
                style={{
                    position: &#39;fixed&#39;,
                    top: &#39;320px&#39;,
                    right: &#39;0&#39;,
                    width: &#39;50px&#39;,
                    height: &#39;50px&#39;,
                    zIndex:&#39;3&#39;,
                    backgroundImage: &#39;linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)&#39;,
                    border:&#39;0&#39;,
                    transition:&#39;all 1s&#39;
            }}>回到顶部</button>
function handleScroll(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

ログイン後にコピー

トップに戻るためのreactの実装方法