如何在没有 react-scroll 包的情况下在 react 中添加平滑的 srcolling 和滚动功能

我想在我的反应网站中添加平滑滚动功能。我有一个标题组件,其中包含导航栏,其中包含三个链接,分别是 Home、Service、About。 Service 和 About 链接到它们各自的组件,即 Service.js 和 About.js。现在我制作了一个 Home 组件,其中包含三个组件,即 Hero、Service、About,因此,在主页中,这些组件堆叠在彼此下方。我希望每当用户单击标题中的链接时,它应该向下滚动到该特定组件,而不是导航到该组件并单独呈现它。

我尝试使用教程中的 react-scroll 包,它按预期工作,但后来我意识到这些链接不再作为真正的链接工作。因此,如果用户假设在登录页面中单击主页链接或服务链接或关于,他不会被重定向到主页。我是新手,不知道该怎么做。请建议我一种平滑滚动的方法。

下面是代码。

标头.js

function Header() {
  return (
    <Nav>
      <Link to="/">
        <Logo src="/images/logo_name_header.svg" />
      </Link>

      <NavMenu>
        <ul>
          <li>
            <Link to="/">
              <span>Home</span>
            </Link>
          </li>
          <li>
            <Link to="/service">
              <span>Service</span>
            </Link>
          </li>

          <li>
            <Link to="/about-us">
              <span>About Us</span>
            </Link>
          </li>
          <li>
            <Link to="/contact">
              <span>Contact Us</span>
            </Link>
          </li>

          <li>
            <Link to="/register">
              <div className="cta-register">Register</div>
            </Link>
          </li>

          <li>
            <Link to="/login">
              <span>Login</span>
            </Link>
          </li>
        </ul>
      </NavMenu>
    </Nav>
  );
}

export default Header;

首页.js

function Home() {
  return (
    <Container>
      <Hero />
      <Service />
      <About />
    </Container>
  );
}

export default Home;
stack overflow How to add smooth srcolling and scroll feature in react without react-scroll package
原文答案

答案:

作者头像

简单的 CSS scroll-behavior: smooth 不适合你? docs

作者头像

使用 id 定位要滚动到的 div 然后在链接上添加 href="#id"

作者头像
html {
  scroll-behavior: smooth;
}

这对我有用!

作者头像

首先将 id 添加到您的组件。
英雄.js

function Hero() {
 return (
  <section id="Hero">
    //..
  </section>
 );
}

服务.js

function Service() {
 return (
  <section id="Service">
    //..
  </section>
 );
}

关于.js

function About() {
 return (
  <section id="About">
    //..
  </section>
 );
}

然后通过在链接中添加该组件的#id 并使用“href”而不是“to”来更新您的 Header.js。注意:不要忘记在 href 中使用“/”。例如:

<Link href="/#id">

标题.js

function Header() {
 return (
  <Nav>
   <Link to="/">
    <Logo src="/images/logo_name_header.svg" />
   </Link>

   <NavMenu>
    <ul>
      <li>
        <Link to="/">
          <span>Home</span>
        </Link>
      </li>

      <li>
        <Link href="/#Hero">
          <span>Hero</span>
        </Link>
      </li>
      <li>
        <Link href="/#Service">
          <span>Service</span>
        </Link>
      </li>

      <li>
        <Link href="/#About">
          <span>About</span>
        </Link>
      </li>
      <li>
        <Link to="/contact">
          <span>Contact Us</span>
        </Link>
      </li>

      <li>
        <Link to="/register">
          <div className="cta-register">Register</div>
        </Link>
      </li>

      <li>
        <Link to="/login">
          <span>Login</span>
        </Link>
      </li>
    </ul>
   </NavMenu>
  </Nav>
 );
}

export default Header;

为了平滑滚动,你做对了,你可以使用:( https://www.npmjs.com/package/react-scroll )