react 实现滚动加载_在React中实现平滑滚动

react 实现滚动加载

Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being instantly taken to a different part of the (same) page, the user is navigated there via a scroll animation. It's one of those subtle features on a site that makes an incredible difference in terms of aesthetics. I personally just implemented this on one of my personal sites because I love the look and feel it provides to the user.

平滑滚动，不知道它是什么？ 好吧，不是单击按钮并立即转到（相同）页面的不同部分，而是通过滚动动画在此导航用户。 它是网站上那些微妙的功能之一，在美观方面产生了难以置信的变化。 我个人只是在我的一个个人网站上实现了此功能，因为我喜欢它为用户提供的外观。

That said, even though smooth scrolling might be subtle, it can be a bit tricky to implement yourself. Because of that, in this article, we are going to use the react-scroll package on NPM.

就是说，尽管平滑滚动可能很微妙，但实现自己可能有些棘手。 因此，在本文中，我们将在NPM上使用react-scroll软件包。

使用React滚动 ( Using react-scroll )

We'll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works:

我们将在本教程中构建一个简单的应用程序，但是如果您想快速了解react-scroll的工作方式，请执行以下操作：

安装react-scroll (Install react-scroll)

npm i -S react-scroll

导入react-scroll软件包 (Import the react-scroll Package)

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

添加链接组件 (Add the Link Component)

The <Link /> component will point to a certain area of your app.

<Link />组件将指向您应用程序的特定区域。

<Link to="section1">

Let's take a deeper dive and build a little React app with smooth scrolling.

让我们更深入地研究，并通过平滑滚动构建一个小的React应用程序。

入门 ( Getting Started )

For convenience, I've created a starter React project (using Create React App 2.0) that has a navbar at the top along with five different sections of content. The links in the navbar are just anchor tags at this point, but we