单击Navbar链接Bootstrap时的滑动效果 [英] Sliding effect when clicking a Navbar link Bootstrap
问题描述
这是我指的网站链接: https://bradrar.github.io/coffee-website/
Here is the link of my website I am referring to : https://bradrar.github.io/coffee-website/
我的网页上有3个导航链接，分别是:
My webpage has 3 navigation links namely :
- 我们是谁
- 我们做什么
- 联系我们
点击后，我将"a href"标签链接到页面的每个部分.
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.
我要完成的示例如下: https://blackrockdigital.github.io/startbootstrap-freelancer/
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>
推荐答案
现代浏览器中最简单的方法是使用 scroll-behavior
The simplest way in modern browsers is using scroll-behavior
html {
scroll-behavior: smooth;
}
或者，您可以使用jQuery动画.
Alternatively you can use jQuery animate.
这篇关于单击Navbar链接Bootstrap时的滑动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
