Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Reaktion, um an die Spitze zurückzukehren

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

藏色散人
藏色散人Original
2022-12-30 10:29:023013Durchsuche

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.

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

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.

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

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

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn