So implementieren Sie die Reaktion, um an die Spitze zurückzukehren

React implementiert die Methode zur Rückkehr nach oben: 1. Erstellen Sie eine Funktionskomponente „ScrollDemo.js“ 2. Erstellen Sie eine Schaltfläche und übergeben Sie den Code „function handleScroll(){document.body.scrollTop = document.documentElement.scrollTop“. = 0 ;}" um den Effekt einer Rückkehr nach oben zu erzielen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man die Rückkehr zum Anfang in React?

Wissensvorbereitung:

scrollTop stellt die Anzahl der über dem Inhaltsbereich verborgenen Pixel dar. Wenn das Element nicht gescrollt wird, ist scrollTop 0. Wenn das Element vertikal gescrollt wird, Der Wert von scrollTop erhöht sich

Zieleffekt:

Ich möchte erkennen, dass ich nach dem Klicken auf die Schaltfläche „Zurück nach oben“ zu der Stelle zurückkehren kann, an der scrollTop 0 ist, also ganz oben.

Erstellen Sie unten eine Funktionskomponente ScrollDemo.js. Und schreiben Sie den Schlüsselcode hinein, eine Schaltfläche, die beim Klicken die HandleScroll-Methode aufruft. Feste Positionierung für die Schaltfläche

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

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Reaktion, um an die Spitze zurückzukehren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!