在 React 中滾動到頂部

我們將介紹如何在 React 中建立具有滾動到頁面頂部功能的按鈕。

在 React 中使用 react-scroll-to-top 庫建立滾動到頂部按鈕

當我們在一個頁面上有很多內容時，使用者很難滾動到頂部來檢視導航或導航到另一個頁面。但作為開發人員，我們總是想方設法讓使用者只需單擊一下按鈕即可輕鬆滾動到頂部。

如果我們嘗試構建一個滾動到頂部按鈕的所有功能，我們可能需要編寫一點程式碼。但是當我們在開發一個 React 應用程式時，我們可以通過安裝一個讓我們的生活更輕鬆的庫來實現這個功能。

讓我們通過一個示例，只需一個按鈕即可滾動到頂部。

一個名為 react-scroll-to-top 的庫用於獲取滾動到頂部的功能。因此，讓我們使用以下命令在 React 中建立一個新應用程式。

# react
npx create-react-app my-app

在 React 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# react
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# react
npm start

現在，讓我們使用 npm 安裝庫 react-scroll-to-top。

# react
npm i react-scroll-to-top

安裝庫後，我們現在可以在我們的 App.js 中匯入 ScrollToTop。

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

現在，在我們的預設函式中，我們將返回一個模板，該模板將覆蓋頁面的 200vh 左右，以實現滾動到頂部。我們還將返回帶有一些設定的 ScrollToTop 元件，例如 smooth 用於平滑滾動，color 用於設定圖示的顏色。

所以我們在 App.js 中的程式碼將如下所示。

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

現在，讓我們檢查一下我們的應用程式是如何工作的。

輸出：

正如你在上圖中所看到的，我們通過在應用程式中新增一行程式碼成功地建立了滾動到頂部的動畫。

通過這種方式，我們可以在任何頁面上使用滾動到頂部功能，而不需要編寫多於一行的程式碼。