react-scroll-into-view

react-scroll是一个用于实现平滑滚动效果的React软件包。它提供了一种简单的方式来将滚动动画应用于React应用程序中的元素。通过使用react-scroll，您可以轻松地将页面滚动到指定的位置或元素。

以下是一个使用react-scroll实现滚动到指定元素的示例：

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

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

  const scrollToElement = () => {
    scroll.scrollTo(500); // 滚动到页面上距离顶部500像素的位置
  };

  return (
    <div>
      <Link
        activeClass="active"
        to="element"
        spy={true}
        smooth={true}
        offset={-70}
        duration={500}
      >
        Scroll to Element
      </Link>

      <div id="element" style={{ height: "1000px" }}>
        Scroll to this Element
      </div>

      <button onClick={scrollToTop}>Scroll to Top</button>
      <button onClick={scrollToElement}>Scroll to Element</button>
    </div>
  );
};

export default App;

在上面的示例中，我们首先导入了`Link`和`animateScroll`组件。然后，我们在组件中定义了两个滚动函数`scrollToTop`和`scrollToElement`。`scrollToTop`函数将页面滚动到顶部，而`scrollToElement`函数将页面滚动到距离顶部500像素的位置。

在组件的返回部分，我们使用`Link`组件创建了一个链接，当点击该链接时，页面将平滑滚动到具有id为"element"的元素。我们还在`Link`组件中设置了一些属性，例如`spy`用于监听滚动事件，`smooth`用于实现平滑滚动效果，`offset`用于设置滚动位置的偏移量，`duration`用于设置滚动动画的持续时间。

最后，我们在页面上创建了一个具有id为"element"的元素，以便我们可以滚动到该元素。我们还创建了两个按钮，分别用于触发`scrollToTop`和`scrollToElement`函数。

这样，当您点击"Scroll to Element"链接或按钮时，页面将平滑滚动到具有id为"element"的元素。