導航欄滾動

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>