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

您可能想要使用javascript。这是我的例子。

$("a").click(function(){
  var pageId = $(this).attr("data-page");
  $("html, body").animate({ scrollTop: $("#"+pageId).offset().top }, 1000);
});

div.page {
  min-height:1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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:blue;" data-page="about">About</a></li>
      <li><a href="#" style="color:blue;" data-page="portfolio">Portfolio</a></li>
      <li><a class="portfolio-scroll" href="#" style="color:blue;" id="contact-nav" data-page="contact">Contact</a></li>
    </ul>
</div>
    
    <div class="page" id="about"><h1>About</h1></div>
    <div class="page" id="portfolio"><h1>Portfolio</h1></div>
    <div class="page" id="contact"><h1>Contact</h1></div>
</nav>

Answer 2

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

提供您的部分，说＆＃34;关于＆＃34;，ID：

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

然后更改你的主播链接：

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

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

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

Answer 3

您可以使用ID进行滚动。

简单地，这样输入ID

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

然后在href中您可以执行以下操作

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

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

   html{
     scroll-behavior: smooth;;
   }

单击时导航栏滚动

3 个答案: