Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan tindak balas untuk kembali ke atas

Bagaimana untuk melaksanakan tindak balas untuk kembali ke atas

藏色散人
藏色散人asal
2022-12-30 10:29:022993semak imbas

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.

Bagaimana untuk melaksanakan tindak balas untuk 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.

Bagaimana untuk melaksanakan tindak balas untuk kembali ke 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;
    }

Bagaimana untuk melaksanakan tindak balas untuk kembali ke atas

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn