通过平滑滚动应用持续时间答案

【问题标题】：applying duration with smooth scroll通过平滑滚动应用持续时间
【发布时间】：2021-03-31 20:06:57
【问题描述】：

我使用 react-router-hash-link 而不是 React-Scroll 因为我需要链接到另一个组件以及应用平滑滚动。我可以对滚动做一个节日，但我不知道如何为滚动添加持续时间。如何为滚动添加持续时间？提前非常感谢，非常感谢任何帮助。这是我的代码：

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>

【问题讨论】：

标签： reactjs

【解决方案1】：

我遇到了完全相同的问题，我希望平滑滚动到锚标记。我设法做到了，它可能不是最漂亮的，但它应该完成它。它结合了哈希链接和 react-scroll：

你需要安装下面的依赖，下面的代码复制粘贴：

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

然后这段代码应该放在每个链接的导航栏文件中，例如我使用了你的#intro：

 <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>

我希望这会有所帮助！

我按照以下两个指南将它们放在一起....

This 让锚标签工作...... 和this 以获得平滑滚动

【讨论】：