导航栏滚动

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

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

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

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

，然后改变你的锚的链接：

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

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

注意：你也有你的结束标记交换周围 - </div>和</nav>是在错误的顺序。

Answer 2

您可能想使用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>