这是我指的网站链接：https://bradrar.github.io/coffee-website/
我的网页上有3个导航链接，分别是：
点击后，我将“ a href”标签链接到页面的每个部分。
我的问题是。如何做到这一点，以便每当我单击“我们是谁”之类的链接时，它都会产生滑动效果，而不仅仅是迅速跳到该部分。
我要完成的示例如下：https://blackrockdigital.github.io/startbootstrap-freelancer/
请注意，当您单击“投资组合”链接时，它具有滑动效果。我也希望在我的网页中有这种效果。
如果有人感兴趣，我将代码放在这里，但我认为顶部的链接就足够了：
<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>
答案 0 :(得分：0)