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

Question

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

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

以下是代码。

Header.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;

Home.js

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

export default Home;

Answer 1

简单的 CSS

scroll-behavior: smooth

不适合你？ 文档

Answer 2

html {
  scroll-behavior: smooth;
}

这对我有用！

Answer 3

首先将 id 添加到您的组件中。
Hero.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)

Answer 4

您可以像这样在 Header 组件中创建一个函数。

function Header() {

  const handleClickScroll = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

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

      <NavMenu>
        <ul>
        <li
          onClick={() => handleClickScroll("bio")}
        >
          Bio
        </li>
        <li
          onClick={() => handleClickScroll("about")}
        >
          About
        </li>
        <li
          onClick={() => handleClickScroll("projects")}
        >
          Projects
        </li>
        <li
          onClick={() => handleClickScroll("contact")}
        >
          Contact
        </li>
      </ul>
      </NavMenu>
    </Nav>
  );
}

export default Header;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

然后在每个组件内添加一个与您在该函数上传递的名称相同的 id，如下所示：

import React from "react";
import Card from "../Card/Card";

const Portfolio = () => {
  return (
    <div id="projects">
    // your JSX goes here ...
    </div>
      );
    };

export default Portfolio;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

快乐编码👨u200d💻 如果觉得有帮助就点个赞吧🙏

Answer 5

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