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

【问题标题】：React - Navigation that will smooth scroll to section of the pageReact - 将平滑滚动到页面部分的导航
【发布时间】：2020-04-13 20:44:17
【问题描述】：

所以我正在尝试为我的单页应用创建一个导航，该导航将平滑滚动到页面的部分。

我希望我的导航在页面顶部带有链接，当用户单击时，它们会将它们平滑地向下滚动到页面的部分。我也希望这样，例如，如果用户直接转到链接 website.com/about，它将平滑滚动到该部分，就像您在导航组件上单击 about 一样。

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

这可以通过 HashRouter 实现吗？

这是我目前拥有的代码：

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，感谢分叉！ :)

【问题讨论】：

有一个组件叫react-scroll。我没有尝试过，但它看起来像你正在寻找的：npmjs.com/package/react-scroll
您是否考虑过使用常规锚标签（<a href="#about">About</a>）并设置页面的 css scroll-behavior: smooth？
@Jordan 在反应中有一个<ScrollView> - 为什么不使用它？
@terrymorse 我不想使用外部包。
@RachelGallen 我很确定 ScrollView 是 React Native 的东西，不是吗？

标签： javascript reactjs react-router

【解决方案1】：

您可以做的是使用anchor 标记而不是react-router-dom 中的Link，并在部分上使用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>
   );
  }

要使用 url path 滚动到一个部分，您必须从 url 中提取 path 并滚动到具有特定 path 作为 id 的部分

  useEffect(() => {
    let url = window.location.href.split("/");
    let target = url[url.length - 1].toLowerCase();
    let element = document.getElementById(target);
    element && element.scrollIntoView({ behavior: "smooth", block: "start"});
  }, []);

代码沙盒here

希望对你有帮助

【讨论】：

不幸的是，这不符合我的问题中的标准，您无法使用 URL 转到某个部分，并且它不会平滑滚动，它只是突然进入视图。
您可以使用scrollIntoView({ behavior: 'smooth' }) 使其平滑滚动。 See docs
@AlexWayne 修复了平滑部分，但我仍然无法使用 URL 直接进入该部分。
@Jordan 我添加了平滑效果并即兴发挥了一点，只要确保部分的 id 与 url 相同（我已经更新了代码框。检查一下）
@AbdullahAbid 这绝对像我希望的那样工作。点击链接后有没有办法更改网址？例如，如果我单击联系人链接，则 URL 将更新为 /contact?

【解决方案2】：

要让地址栏中的链接更新，请使用@Abdullah Abid 的答案，但将<a> 标签更改为<link>，将href 更改为to。

查看我对 Abdullah 的沙盒的修改 Here

【讨论】：