使用 React 实现平滑滚动：教程

Preslav Dobrev2022-10-05 · 6 min read

React 是一个开源的 JavaScript 库，用于构建具有未来感的网站设计和改善用户界面。由于其健壮性、灵活性和高效性，它已经超越了竞争对手的前端库和框架。React 提供了出色的特性和突出的功能，有助于实现自定义和动态动画。

在动画集合列表中，React 中的平滑滚动有助于增强 Web 应用程序的交互性并简化动画。 平滑滚动 是一项允许用户使用导航栏跳转到页面不同部分的功能。这意味着，用户不是在按下按钮后立即被拉到同类页面的不同部分，而是通过滚动动画被引导至目标位置。

在本指南中，我们将 逐步引导您使用 React 实现平滑滚动.

让我们开始吧！

前提条件

要学习本教程，您需要满足以下条件：

Git 已安装在您的系统上。
- 跟随步骤以在 Ubuntu 18.04 上安装和配置 Git
最新版本的 Node.js 必须设置好。
- 使用本教程来在 Ubuntu 18.04 上安装 Node.js

基本设置：安装 react-scroll

在这篇适合初学者的指南中，我们将设计一个简单的应用程序，使用 react-scroll。如果您已经熟悉 React 基础知识并期待提升您在 react-scroll 函数方面的知识，请参考这些总结的步骤。

首先，安装 react-scroll，使用以下命令：

npm npm i -S react-scroll

1	npm npm i -S react-scroll

接下来，导入 react-scroll 包：

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

之后，插入 <Link /> 组件，它将指向应用程序的特定部分：

<Link to="section1">

1	<Link to="section1">

让我们继续，设计一个具有平滑滚动效果的 React 应用程序。

步骤 1：克隆并运行 React 应用

在我们的指南中，我们将使用初始 React 项目，它在顶部包含一个导航栏。在这里，您将看到五个独特的 <部分> 依次排列。

目前，导航栏中的链接是锚点标签。但是，我们很快就需要更新它们以启用平滑滚动。请遵循 React With Smooth Scrolling 页面以导航到项目仓库。需要注意的是，该链接指向的是 start 分支。而 master 分支包含了所有已完成的修改。打开该 URL 后，您将看到该仓库：

在仓库页面上，您将看到 Code 绿色按钮。点击下拉箭头：

点击该箭头后，您将看到 HTTP 链接:

现在转到您的 git 终端，并使用以下命令来克隆该项目到您的本地机器：

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

在 src/Components 目录中，您将找到一个 Navbar.js 文件，其中包含 <Navbar>，其中带有 nav-项，对应五个独特的 <Section>，它们按顺序排列：

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">部分 1</li>
            <li className="nav-item">部分 2</li>
            <li className="nav-item">部分 3</li>
            <li className="nav-item">部分 4</li>
            <li className="nav-item">部分 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logo。"

onClick={this.scrollToTop}

</ul>

</div>

</nav>

);

}

接下来，导航到 App.js 文件，位于 src 目录。在那里，您将看到 <Navbar> 与五个 <Section> 放在一起：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="第 1 部分"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="第 2 部分"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="第 3 部分"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="第 4 部分"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="第 5 部分"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="第一节"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="第二节"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="第三节"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="第 4 节"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="第 5 节"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

默认情况下，每个 <Section> 组件都将包含一个 title 和 subtitle.

DRY 原则的实际应用

由于我们在教程中使用了占位文本，让我们添加一个 dummyText.js 文件以节省时间并减少重复。使用新创建的 JavaScript 文件以传递到每个 <Section> 元素。

安装 React

使用以下命令来运行应用：

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

运行 rpm 将在开发模式下启动您的应用程序。转到 localhost:3000 并验证应用是否在您的系统上运行：

现在我们的应用正在运行，让我们继续，在下一步中安装 react-scroll。

第 2 步：安装并配置 React-Scroll

首先，您需要访问 Node Package Manager 上的包来下载 react-scroll。在撰写本指南时，我们使用的是最新版本的 react-scroll , 1.8.7。如果未来有更新，请确保获取最新版本：

运行以下命令来安装 react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

之后，转到 Navbar.js 文件，并导入 Link 和 animateScroll，来自 react-scroll。为了简单和易于使用，让我们将 animateScroll 作为 scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

在此之后，更新 nav-项以使用 <Link> 组件。您将看到在 <Link> 组件中列出了许多属性，这些属性对我们的教程来说微不足道。但是，您可以通过查看文档页面.

一些值得您注意的重要属性：

activeClass – 元素处于激活状态时使用的类。
to – 通知要滚动到的指定目标。
- 该 to 功能至关重要，因为它指示组件要滚动到哪个元素。
spy：指向选择 Link 当滚动到目标位置时。
smooth: 使滚动具有动画效果。
offset: 额外滚动 px，例如内边距（padding）。
- 您还可以使用 offset 来定义到达单个 <Section>.
duration: 动画滚动时间，可以是一个数字或一个函数。

以下是可用于每个 <Link> 组件的属性示例。它们之间唯一不同的将是 to 属性，因为它们都指向不同的 <Section>：

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

考虑更新所有的 nav-项。在成功添加所有项后，返回浏览器并查看实时的平滑滚动效果。

步骤 3：为活动链接设置样式

在这一步中，我们将使用 CSS 属性来重新设计我们的代码块，使其看起来更时尚。 activeClass 功能使您能够勾勒出一个类，并在 <Link> 组件在 to 元素处于激活状态时应用。如果 <Link> 您正在使用的具有 to 元素视图在页面顶部，请将 <Link> 视为激活状态。点击 <Link> 或手动向下滚动 <Section> 以触发 <Link>.

让我们尝试测试并看看它是如何工作的。打开 Chrome DevTools 并检查第五个 <Link>，如下面突出显示的那样。点击 <Link> 或手动滚动 <Section> 到页面的下半部分，您将观察到 active 类被应用：

作为附加步骤，创建一个 active 类并为链接添加下划线。然后，将这一小块 CSS 代码添加到 App.css 文件中，该文件位于 src 目录：

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

之后，刷新浏览器。稍微滚动一下，您会注意到指定的 <Link> 现在有了下划线：

步骤 4：添加更多功能

除了上面使用的属性外，还有其他功能，例如 scrollToTop, scrollToBottom，仅举几例，供您使用。您可以直接调用这些函数并显式管理它们的操作。关于这些功能，自然地，导航栏中的应用 logo 将带您回到首页顶部。

使用 scrollToTop 函数，向 nav-logo 添加点击处理程序，以将用户滚动回页面顶部：

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

使用 scrollToTop 函数，向 nav-logo 添加一个点击处理程序，以便将用户滚动到页面底部：

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

回到浏览器中，您现在可以向下滚动页面，点击导航栏中的 logo，然后返回到页面上方。

总结

平滑滚动 是可以为 Web 应用程序增添大量视觉价值的功能之一。 react-scroll 包可以让你利用这一特性，而无需承担巨大的开销。

作为你学习体验的下一步，可以看看更多你能在其上找到的 React 和 JavaScript 教程我们的博客:

祝你计算愉快！

Preslav Dobrev

作者 · CloudSigma

Preslav Dobrev 是 CloudSigma 的创意设计师，专注于通过传统和创新营销渠道打造一致的企业形象。他擅长将艺术愿景与战略营销相融合，创造具有影响力的品牌叙事。

使用 React 实现平滑滚动：教程

前提条件

基本设置：安装 react-scroll

步骤 1：克隆并运行 React 应用

第 2 步：安装并配置 React-Scroll

步骤 3：为活动链接设置样式

步骤 4：添加更多功能

总结

Preslav Dobrev

评论