Nach oben scrollen in React

Wir werden vorstellen, wie man in React eine Schaltfläche mit Scrollen zum Anfang der Seitenfunktionalität erstellt.

Verwenden Sie die react-scroll-to-top-Bibliothek, um in React einen Scroll-to-Top-Button zu erstellen

Wenn wir viele Inhalte auf einer einzelnen Seite haben, ist es für Benutzer schwierig, nach oben zu scrollen, um die Navigation anzuzeigen oder zu einer anderen Seite zu navigieren. Aber als Entwickler finden wir immer Wege, um es den Benutzern leicht zu machen, mit nur einem Klick nach oben zu scrollen.

Wenn wir versuchen, eine Scroll-to-Top-Schaltfläche mit allen Funktionen zu erstellen, müssen wir möglicherweise ein wenig Code schreiben. Aber wenn wir an einer React-Anwendung arbeiten, können wir diese Funktionalität erreichen, indem wir eine Bibliothek installieren, die entwickelt wurde, um uns das Leben zu erleichtern.

Gehen wir ein Beispiel durch, um mit nur einer Schaltfläche nach oben zu scrollen.

Eine Bibliothek namens react-scroll-to-top wird verwendet, um die Scroll-to-top-Funktionalität zu erhalten. Lassen Sie uns also eine neue Anwendung in React erstellen, indem Sie den folgenden Befehl verwenden.

# react
npx create-react-app my-app

Nachdem wir unsere neue Anwendung in React erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# react
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# react
npm start

Installieren wir nun die Bibliothek react-scroll-to-top mit npm.

# react
npm i react-scroll-to-top

Sobald die Bibliothek installiert ist, können wir nun die ScrollToTop in unsere App.js importieren.

# react
import ScrollToTop from "react-scroll-to-top";

Jetzt geben wir in unserer Standardfunktion eine Vorlage zurück, die etwa 200vh der Seite abdeckt, um einen Bildlauf nach oben zu erreichen. Wir werden auch die Komponente ScrollToTop mit einigen Einstellungen wie smooth für reibungsloses Scrollen und color zum Festlegen der Farbe des Symbols zurückgeben.

Unser Code in App.js sieht also wie folgt aus.

# react
import React from "react";
import "./styles.css";
import ScrollToTop from "react-scroll-to-top";

export default function App() {
  return (
    <div className="App">
      <ScrollToTop smooth color="#000" />
      <h1>Scroll To See Magic</h1>
      <p style={{ marginTop: "200vh" }}>You Have Reached Bottom</p>
    </div>
  );
}

Lassen Sie uns nun überprüfen, wie unsere Anwendung funktioniert.

Ausgabe:

Wie Sie im obigen Bild sehen, haben wir erfolgreich eine Scroll-to-top-Animation erstellt, indem wir unserer Anwendung eine einzelne Codezeile hinzugefügt haben.

Auf diese Weise können wir die Scroll-to-top-Funktion auf jeder unserer Seiten verwenden, ohne mehr als eine Codezeile schreiben zu müssen.