Sliding effect when clicking a Navbar link Bootstrap

问题

Here is the link of my website I am referring to : https://bradrar.github.io/coffee-website/

My webpage has 3 navigation links namely :

Who We Are
What We Do
Contact Us

I made the "a href" tag link to each section of the page when clicked.

My question is. How can I make it so that whenever I click a link such as "Who We Are", It will have a sliding effect and not just jump to the section quickly.

An example of what I want to accomplish is here : https://blackrockdigital.github.io/startbootstrap-freelancer/

Notice how when you click the "Portfolio" link, it has a sliding effect. I want this effect in my webpage too.

If anyone is interested, I will put the code here but I think the link at the top is enough:

<div class="fixed-top">
  <nav class="navbar navbar-expand-lg navbar-light bg-light" >
    <a class="navbar-brand active" href="#">
      <img src="Images/Free-Coffee-Logo-1-999x999.png" width="30" height="30" class="d-inline-block align-top" alt="">
      Insta Coffee
    </a>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="#who-we-are">Who We Are</a></li>
      <li class="nav-item"><a class="nav-link" href="#what-we-do">What We Do</a></li>
      <li class="nav-item"><a class="nav-link" href="#contact-us">Contact Us</a></li>
    </ul>        
  </nav>
</div>

<div class="jumbotron text-center">
  <div  class="row">
    <div class="col-md-6">
      <img id="front-img" class="img-fluid" src="Images/pexels-photo-437716.jpeg" alt="Coffee for front page">
    </div>
    <div class="col-md-6">
      <img style="margin-top: 4em;" src="Images/Free-Coffee-Logo-1-999x999.png" width="100" height="100" class="d-inline-block align-top" alt="Insta Coffee">
      <div class="page-header">
        <h1  class="text-center">The More You Sip, the More You'll Love</h1>
      </div>
      <h4>Lifes pleasurable moments is just one sip away!</h4> 
    </div>
  </div>
</div>

<div id="who-we-are" class="container-fluid text-center">
  <h2>Who We Are</h2>
  <p>We are a team of coffee makers dedicated to give you the best coffee. Our team composes of people with 10 years of experience making coffee</p>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img class="img-fluid mt-5 " src="Images/Barista2.png" alt="barista coffe maker"/>
        <h4 class="lead m-5">"I want to Espresso how much dedicated I am in making good coffee." </h4>
      </div>
      <div class="col-md-6">
        <img class="img-fluid mt-5" src="Images/Barista.png" alt="barista coffe maker"/>
        <h4 class="lead m-5"> "I’m brewing a whole pot of love for you."</h4>
      </div>
    </div>
  </div>
</div>

<div id="what-we-do" class="text-center jumbotron">
  <h2 class="text-center">What We Do</h2>
  <p>We specialize with some of the most popular coffee in the market such as:</p>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3"> <img src="Images/Caffè Americano.png" alt="Caffè Americano"/><p> Caffè Americano </p></div>
      <div class="col-md-3"> <img src="Images/Café Latte.jpg" alt="Cafe Latte"/><p> Cafè Latte </p></div>
      <div class="col-md-3"> <img src="Images/Cappuccino.jpg" alt="Cappuccino"/> <p> Cappuccino </p></div>
    </div>
    <div class="row  justify-content-center">
      <div class="col-md-3"> <img src="Images/Espresso.jpg" alt="Espresso"/> <p>Espresso</p> </div>
      <div class="col-md-3"> <img src="Images/Flat White.jpg" alt="Flat White Coffee"/> <p> Flat White</p> </div>
      <div class="col-md-3"> <img src="Images/Long Black.jpeg" alt="Long Black Coffee"/> <p> Long Black</p> </div>
    </div>
  </div>

</div>




<section id="contact-us">
  <div class="container ">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2 class="text-center">Contact Us</h2>
        <form action="mail.php">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" placeholder="Jane Doe" >
          </div>
          <div class="form-group">
            <label for="Email">Email</label>
            <input type="email" class="form-control" placeholder="jane.doe@example.com">
          </div>
          <div class="form-group ">
            <label for="Message">Your Message</label>
            <textarea  class="form-control" placeholder="Description"></textarea> 
          </div>
          <button type="submit" class="btn btn-primary">Send Message</button>
        </form>
      </div>

    </div>
  </div>
</section>


<!-- Footer -->
<footer class="page-footer font-small blue">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2018 Copyright:
    <a href="https://github.com/bradrar"> BRADRAR </a>
  </div>
  <!-- Copyright -->

</footer>