如何使用此 npm 平滑滚动导航栏项目答案

【问题标题】：How can i scroll smoothly a navbar item with this npm如何使用此 npm 平滑滚动导航栏项目
【发布时间】：2022-01-21 12:15:16
【问题描述】：

我即将完成我的作品集，但我不知道如何使用此 npm react-responsive-navbar-overlay 更改“联系我”导航项的滚动行为。

这是我的作品集：https://alexandropineda.netlify.app/

这是我的导航代码

import "../Css/index.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Navbar } from "react-responsive-navbar-overlay";
import Home from "./Home";
import Contact from "./Contact";
import Letra from "../Assets/img/letra-mayus-azul-25medium.png";

function Nav() {

  function scrollToTestDiv(){
    const divElement = document.getElementById('contact');
    divElement.scrollIntoView({ behavior: 'smooth' });
  }

  // let text = "<span onClick={scrollToTestDiv}>/#contact </span>"

  return (
    <BrowserRouter>
      <Navbar fontColor="#000" backgroundColor="#fff" brand={<img onClick={scrollToTestDiv} className="letra-principal" src={Letra} />} links={[{text: "Contact me", link: "#contact"}]} />
      <Routes>
        <Route exact path="/" component={Home} />
        <Route path="/#contact" component={Contact} />
      </Routes>
    </BrowserRouter>
  );
}

export default Nav;

当您单击“A”时可以看到平滑滚动，但我的导航项目没有。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

据我所知，当您点击“联系人”时，您将网址更改为 https://alexandropineda.netlify.app/contact 尝试导航到您的“联系人”组件。我回答的第二部分是尝试与 react-scroll 代替 react-responsive-navbar-overlay。我在很多项目和一些论坛上见过他，他也是那里最受欢迎的组件。

这是一个如何工作的例子，以及你问的一个类似的问题。

react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link

希望我的回答能指导你。

【讨论】：