I'm using bootstrap and this is my code. how to make smooth scroll ? Please help me
<div id="navbar-normal" class="navbar navbar-expand-lg">
<div class="container">
<a href="" class="navbar-brand">
<img src="assets/images/logo.svg" alt="">
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#news" class="nav-link">News</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</div>
<section id="home"><h1>Home</h1></section>
<section id="about"><h1>About</h1></section>
<section id="news"><h1>News</h1></section>
<section id="contact"><h1>Contact</h1></section>
You don't need to use javascript to add smooth scrolling, it can be done by setting scroll-behavior: smooth; css property.
Example:
html {
scroll-behavior: smooth;
}
However that is not supported by all browsers See caniuse.com
By using a library like scroll-js, you can get scrolling working on browsers like safari.
It's not obvious what you mean. If you mean that you want the page to smoothly go from one anchor link to the next, use CSS scroll-behavior. If you want elements on the page to move smoothly as the user scrolls with their finger or mouse wheel, I would suggest Locomotive Scroll or similar. However, you're probably looking for the first option.
CSS scroll-behavior demo:
:root {
scroll-behavior: smooth;
}
/* demo */
nav {
display: block;
height: 1rem;
position: fixed;
}
section {
height: 100vh;
padding-top: 2rem;
}<nav>
<a href="#a">Go to A</a>
<a href="#b">Go to B</a>
<a href="#c">Go to C</a>
</nav>
<section id="a">Section A</section>
<section id="b">Section B</section>
<section id="c">Section C</section>You don't need to use javascript to add smooth scrolling
in css use this
:root{
behavior: smooth;
}