单击时导航栏滚动

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>

我想让我的导航栏在点击导航栏中的选项之一时页面会滚动到页面中的特定部分，例如，当我点击导航栏上的联系人时，页面会向下滚动到同一页面中的联系人部分

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

Answer 1

您可以使用 id 进行滚动。

简单地说，像这样输入 id

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

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

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

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

   html{
     scroll-behavior: smooth;;
   }

Answer 2

您可以使用HTML 锚轻松完成此操作。

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

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

然后更改您的锚点链接：

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

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

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