navigation bar scroll when clicked

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>

i wanted to make my navbar when one of the option in the navbar is clicked the page would scroll to that specific section in the page, for example when i click contact on my navbar the page would scroll down to the contact section in the same page

how to make something like that, can anyone help me ?

Answer 1

You can do this easily using HTML anchors.

Give your section, say "About", an ID:

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

And then change your anchor's link:

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

And when you click the anchor, it will automatically scroll to the correct place. The best thing about this is that it requires no javascript, and is supported in every browser.

Note: You also have your end tags switched around - </div> and </nav> are in the wrong order.