Bagaimana untuk melaksanakan tindak balas untuk kembali ke atas

React melaksanakan kaedah kembali ke atas: 1. Buat komponen berfungsi "ScrollDemo.js" 2. Buat butang dan hantar kod "function handleScroll(){document.body.scrollTop = document .documentElement .scrollTop = 0;}" untuk mencapai kesan kembali ke atas.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan kembali ke atas sebagai tindak balas?

Persediaan pengetahuan:

scrollTop mewakili bilangan piksel yang tersembunyi di atas kawasan kandungan Bila elemen tidak ditatal, scrollTop ialah 0. Jika elemen menatal secara menegak, nilai scrollTop meningkat

Kesan sasaran:

Jika anda ingin mengklik butang "Kembali ke Atas", anda boleh kembali ke tempat di mana scrollTop adalah 0, juga Itulah bahagian atas.

Yang berikut mencipta komponen berfungsi ScrollDemo.js. Dan tulis kod kunci di dalam, butang, yang memanggil kaedah HandleScroll apabila diklik. Kedudukan tetap untuk butang

<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;
    }

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan tindak balas untuk kembali ke atas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!