如何使用按鈕組件在 React 中滾動到頂部、底部或任何部分

簡介

“滾動到頂部” 對於任何迫使訪問者在到達頁面底部之前滾動很長距離的網站，該功能都是一個很好的補充，因為返回頂部會變得非常煩人。

通過擴展，滾動到底部或任何特定點或部分可讓您在單頁應用程序 (SPA) 的無縫體驗中導航用戶 .

注意： 源代碼可在我們的 GitHub 存儲庫中找到，要查看應用程序的現場演示，請訪問此 Vercel 應用程序。

使用 React 和 React Hooks

對於像這樣的簡單功能，您可以輕鬆地從頭開始編寫解決方案，而不是安裝庫。從頭開始創建這樣的功能允許更多的自定義和欣賞庫抽像出來的內容！

開始使用

我們將製作一個單獨的組件，生成一段可重用的代碼，可以在您的項目之間展開。我們還將使用 react-icons 中的箭頭圖標 不過，對於本指南，任何適合您的圖標都同樣適用。

安裝react-icons

使用 react-icons ，你必須安裝模塊。你可以安裝react-icons 與：

$ npm i react-icons

在 React 中滾動到頂部

讓我們導入庫和圖標本身，並將它們設置為組件：

import React from 'react';
import { FaAngleUp } from 'react-icons/fa';

import './index.css';

const ScrollToTop = () => {
    return (
        <div className="top-to-btm">
            <FaAngleUp className="icon-position icon-style" />
        </div>
    );
};
export default ScrollToTop;

讓我們也為圖標應用一些樣式，並在 index.css 中添加移動動畫 ：

.top-to-btm{
  position: relative;
}
.icon-position{
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}
.icon-style{
  background-color: #551B54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all .5s ease-in-out;
}
.icon-style:hover{
  animation: none;
  background: #fff;
  color: #551B54;
  border: 2px solid #551B54;
}
@keyframes movebtn {
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(20px);
  }
  50%{
    transform: translateY(0px);
  }
  75%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

偉大的！現在我們可以實現讓用戶回到頁面頂部的邏輯了。

實現邏輯

我們將使用 useState() 和 useEffect() hooks 讓我們可以輕鬆快速地開發功能。

import React, { useState, useEffect } from 'react';

下一步是創建一個 state 並將其設置為 false 默認;此狀態將控制 “滾動到頂部”按鈕的可見性 ，因為我們只希望按鈕在用戶向下滾動一點後出現，並在用戶一直滾動到頂部後消失：

const [showTopBtn, setShowTopBtn] = useState(false);

此時，我們將使用 useEffect() hook 來構建決定我們希望按鈕何時出現以及何時消失的邏輯。

注意： 效果掛鉤 在初始渲染後和每次更新狀態時默認處於活動狀態。顧名思義，它用於在狀態發生變化時執行效果。

讓我們將狀態設置為 true 用戶向下滾動 400 像素後：

useEffect(() => {
    window.addEventListener('scroll', () => {
        if (window.scrollY > 400) {
            setShowTopBtn(true);
        } else {
            setShowTopBtn(false);
        }
    });
}, []);

我們添加了一個 EventListener 到 window 偵聽滾動，然後在偵聽器中的條件返回 true 時運行函數 .如果垂直滾動位置大於400 （由您決定），該函數設置 showTopBtn 狀態為 true;否則，將其設置為 false .請記住，當您滾動瀏覽網頁時，它會不斷運行，因此會更新按鈕以在有人滾動回頁面頂部時停止顯示。

我們要實現的最後一個功能是處理 click 事件！用戶單擊按鈕後，我們希望將它們滾動回頂部。謝天謝地 - window 對像有一個專用的 scrollTo() 方法正是為此！讓我們用一個我們將在用戶單擊按鈕時調用的函數來包裝它：

const goToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth',
    });
};

注意： window.scrollTo() 也接受 behavior 用於指定滾動是否平滑動畫的參數（smooth )，或者在一次跳轉中立即發生 (auto , 默認值)。

最後，讓我們添加一個 onclick() 監聽我們標記中的按鈕，將其連接到 goToTop() 方法：

import React, { useState, useEffect } from "react";
import { FaAngleUp } from "react-icons/fa";

import "./index.css";

const ScrollToTop = () => {
    const [showTopBtn, setShowTopBtn] = useState(false);
    useEffect(() => {
        window.addEventListener("scroll", () => {
            if (window.scrollY > 400) {
                setShowTopBtn(true);
            } else {
                setShowTopBtn(false);
            }
        });
    }, []);
    const goToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };
    return (
        <div className="top-to-btm">
            {" "}
            {showTopBtn && (
                <FaAngleUp
                    className="icon-position icon-style"
                    onClick={goToTop}
                />
            )}{" "}
        </div>
    );
};
export default ScrollToTop;

而已！現在可以將組件導入新頁面並使用。在 App.js 文件，讓我們導入它：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

import ScrollToTop from './ScrollToTop';

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

注意： 有關此頁面的樣式，請參閱我們的 GitHub 存儲庫..

使用 react-scroll-to-top 圖書館

react-scroll-to-top library 是一個輕量級的、可自定義的按鈕組件，單擊時會滾動到頁面頂部。這個組件和我們自己的類似，但你不必自己編寫代碼。

自然，它只有在您向下滾動到足以讓它出現時才會出現。

安裝react-scroll-to-top

在終端中運行此命令：

$ npm i react-scroll-to-top

使用 react-scroll-to-top 滾動到頂部

要使用該組件，我們導入 react-scroll-to-top 並像使用我們自己的一樣使用它：

導入然後包含 <ScrollToTop /> 渲染/返回函數中的任何位置：

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

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

圖書館也是可定制的！您可以調整一些道具以獲得不同的效果。

這有這麼多的道具，下面都列出了它們的描述和它們接收的數據類型：

滾動到底部

滾動到底部 React 中的功能類似於 scroll-to-top - 我們定義了一個功能，在按下按鈕時，將用戶滾動到設定點。這一次，重點不是頂部，而是底部：

const scrollToBottom = () => {
  window.scrollTo({
    top: document.documentElement.scrollHeight,
    behavior: 'smooth',
  });
};

我們設置 top 屬性為整個頁面的高度，從 document 獲取 .這將確保我們向下滾動到整個頁面下方的像素高度 - 或者更確切地說，滾動到頁面底部。

下一步是包含 onclick() 按鈕標記中的方法：

<div className="link btn" onClick={scrollToBottom}>
  Scroll to bottom <MdArrowDropDownCircle />
</div>

使用 React 滾動到特定部分

滾動到某個部分在單頁網站中非常流行，因為您無需將用戶路由到“關於我們”和“聯繫”等常見頁面的不同頁面 - 您只需將它們向下滾動到該部分的相關部分頁。在使用頁面講述故事時，這是一種流行的方法，用戶無論如何都應該向下滾動，但也可以跳到某個部分。

再說一次——這基本上就是我們一直在做的事情。不過這一次，我們將滾動到給定的元素。

實現邏輯

我們將使用 useRef() hook - 它是一個內置的 React hook 它接受一個參數作為其初始值並返回一個引用。該引用有一個有趣且有用的屬性，稱為 current . useRef() hook 類似於 Vanilla JavaScript 的 getElementById() .

第一步是導入useRef() 然後創建一個 ref （參考）我們要滾動到的部分：

import { useRef } from react;

const aboutSection = useRef(null);

下一步是添加 ref 我們聲明了我們希望滾動到的部分：

<div className="section section2" ref={aboutSection}>
    <h2>About Us</h2>
</div>

現在，我們滾動到當前引用，並將其偏移到頂部，以便將元素的頂部放在屏幕頂部而不是底部：

const scrollDown = () => {
  window.scrollTo({
    top: aboutSection.current.offsetTop,
    behavior: 'smooth',
  });
};

至此，我們已經成功實現了所有必要的邏輯，以幫助我們使用 react 滾動到主頁的指定區域。接下來，我們將添加 onclick() 我們標記中按鈕的方法：

<li className="link" onClick={scrollDown}>
  About Us
</li>

使我們的代碼可重用

導航欄通常有幾個鏈接到幾個部分。重複的動作需要實例之間的泛化！我們可以通過這種方式使邏輯可重用：

const scrollDown = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

在上面的代碼中，我們傳遞了 ref 的值來自在個人按鈕中觸發的函數。

您頁面上的導航欄可能類似於以下內容：

<div className="section section1">
    <div className="link btn">
        Scroll to bottom <MdArrowDropDownCircle />
    </div>
    <ul className="nav-links">
        <li className="link" onClick={() => scrollDown(aboutSection)}>
        About Us
        </li>
    <li className="link" onClick={() => scrollDown(servcesSection)}>
        Services
    </li>
    <li className="link" onClick={() => scrollDown(contactSection)}>
        Contact
      </li>
    </ul>
</div>

<div className="section section2" ref={aboutSection}>
    <h2>About Us</h2>
</div>
<div className="section section3" ref={servcesSection}>
    <h2>Services</h2>
</div>
<div className="section section4" ref={contactSection}>
    <h2>Contact</h2>
</div>

結論

在本指南中，我們學習瞭如何從頭開始創建可重用組件，以輕鬆執行滾動到頂部操作。這個組件很容易在項目之間轉移！只需傳輸相關文件並將其導入新頁面。最後 - 我們查看了一個為我們處理這個問題的流行庫，以及與自定義它相關的道具。

應用程序的現場演示可以在這裡找到。