Reactjs 使用平滑滚动应用持续时间

我使用react路由器哈希链接而不是react滚动，因为我需要链接到另一个组件以及应用平滑滚动。我能对卷轴做一个提议，但我不知道如何给卷轴增加持续时间。如何将持续时间添加到滚动中？非常感谢您的帮助。这是我的密码：

const scrollWidthOffset = (el) => {
    const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
    const yOffset = -80; 
    window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
}



<div className="collapse navbar-collapse" id="navbarCollapse">
  <div className="navbar-nav ml-auto">
     <Link activeClass="active" smooth to="/#intro" scroll={el => scrollWidthOffset(el, -100)} className="nav-item nav-link">Home</Link>
     <Link activeClass="active" smooth to="/#about" scroll={el => scrollWidthOffset(el, -80)} className="nav-item nav-link">About Us</Link>
     <Link activeClass="active" smooth to="/#contact"  scroll={el => scrollWidthOffset(el, -80)} className="nav-item nav-link">Contact</Link>
     <Link activeClass="active" to="/login#loginform" className="nav-item nav-link">Login</Link>
  </div>
</div>

constScrollWidthOffset=（el）=>{
const yCoordinate=el.getBoundingClientRect（）.top+window.pageYOffset；
常数yOffset=-80；
scrollTo（{top:yCoordinate+yOffset，行为：'smooth'}）；
}
scrollWidthOffset（el，-100）}className=“导航项目导航链接”>主页
scrollWidthOffset（el，-80）}className=“导航项目导航链接”>关于我们
scrollWidthOffset（el，-80）}className=“导航项目导航链接”>联系
登录

我遇到了完全相同的问题，我希望平滑滚动以定位标记。我已经设法做到了，它可能不是最漂亮的，但它应该做到。它结合了哈希链接和反应滚动：

要复制和粘贴，您需要安装以下依赖项和代码：

npm i --save react-anchor-link-smooth-scroll
npm i --save react-scroll
npm i --save react-router-hash-link

然后，这些代码应该放在每个链接的Navbar文件中，我使用了您的#简介，例如：

 <Link
     activeClass="active"
            to="/#intro"
            spy={true}
            smooth={true}
            offset={-70}
            duration={5000}
       >
       <Nav.Link id="nav-links" href="/#intro">
            Services
       </Nav.Link>
 </Link>

服务

最后，无论您想滚动到哪里，都将id放入html中，如下所示

<div id="intro">This is the Intro</div>

这是介绍

我希望这在某种程度上有所帮助

我按照下面的两个指南把它们放在一起

要使锚定标记正常工作。。。 并获得平滑的滚动