React-导航将平滑滚动到页面的一部分

问题描述 投票:1回答:1

因此,我正在尝试为我的单页应用创建导航,该导航将平滑滚动向下到页面的一部分。

我想在页面顶部显示我的导航,其中包含链接,当用户单击链接时,这些链接可以平滑地向下滚动到页面部分。我也希望如此,例如,如果用户直接转到链接website.com/about,它将以与单击导航组件上的about相同的方式平滑滚动到该部分。

我了解react-router-dom如何用于路由页面,但是我对如何使其用于特定目的感到困惑。

这是我当前拥有的代码:

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact />
      </BrowserRouter>
    </div>
  );
}

我也提供了CodeSandBox,叉子很美! :)

javascript reactjs react-router
1个回答
0
投票

您可以做的是使用锚标记代替Link中的react-router-dom,并在各节上使用id。单击锚标记后,将元素滚动到视图中

         <a
        href="/"
        onClick={e => {
          let hero = document.getElementById("hero");
          e.preventDefault();  // Stop Page Reloading
          hero && hero.scrollIntoView();
        }}
      >
        Hero
      </a>
// Rest of Code 
function Hero() {
  return (
    <section id="hero">
      <h1>Hero Section</h1>
    </section>
  );
}

CodeSandbox here

© www.soinside.com 2019 - 2024. All rights reserved.