Estoy usando bootstrap y este es mi código. ¿Cómo hacer un desplazamiento suave? por favor, ayúdame
<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>No necesita usar javascript para agregar un desplazamiento suave, se puede hacer configurando scroll-behavior: smooth; propiedad css. Ejemplo:
html { scroll-behavior: smooth; }Sin embargo, eso no es compatible con todos los navegadores Ver caniuse.com
Al usar una biblioteca como scroll-js , puede hacer que el desplazamiento funcione en navegadores como safari.
No es obvio lo que quieres decir. Si quiere decir que desea que la página pase sin problemas de un enlace de anclaje al siguiente, use el scroll-behavior CSS. Si desea que los elementos de la página se muevan sin problemas a medida que el usuario se desplaza con el dedo o la rueda del mouse, sugeriría Locomotive Scroll o similar. Sin embargo, probablemente estés buscando la primera opción.
Demostración scroll-behavior CSS:
: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>No necesita usar javascript para agregar un desplazamiento suave
en css usa esto
:root{ behavior: smooth; }