单击时导航栏滚动

Question

<div class="navbar">
  <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
       <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">company name</a>
    </div>
    <ul class="nav navbar-nav navbar-right ">
      <li><a href="#" style="color:white;">About</a></li>
      <li><a href="#" style="color:white;">Portfolio</a></li>
      <li><a class="portfolio-scroll" href="#" style="color:white;" id="contact-nav">Contact</a></li>
    </ul>
</div>
</nav>

我想在单击导航栏中的一个选项时创建导航栏，页面将滚动到页面中的特定部分，例如，当我单击导航栏上的联系人时，页面将向下滚动到同一页面中的联系人部分

如何制作这样的东西，有人可以帮助我吗？

原文由 Mike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 HTML 锚 轻松地做到这一点。

给你的部分，比如“关于”，一个 ID：

 <h1 id="about">About</h1>

然后更改锚点的链接：

 <a href="#about" style="color:white;">About</a>

当您单击锚点时，它会自动滚动到正确的位置。最好的一点是它 不需要 javascript，并且每个浏览器都支持它。

注意：您还切换了结束标记 - </div> 和 </nav> 顺序错误。

原文由 Perry Mitchell 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 id 进行滚动。

简单的，像这样把id放进去

   <div id="about"></div>

然后在 href 中你可以做这样的事情，

    <a href="#about">Click to scroll</a>

此外，为了避免突然弹出和平滑过渡效果，您可以在 css 中编写以下内容。

    html{
     scroll-behavior: smooth;;
   }

原文由 Anand Kishor 发布，翻译遵循 CC BY-SA 4.0 许可协议