EN VI

How to make smooth scroll with js or css?

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>

Solution:

in CSS use this

:root{
  scroll-behavior: smooth;
}

in JavaScript use this

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener("click", function(e){
    e.preventDevault()

    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    })
  })
})