Estoy desarrollando un sitio web de una página, cuando el usuario hace clic en un botón en particular, debe desplazarse hacia abajo a otra sección de la página.
Alguien me puede orientar como hacer eso?
Creo que la propiedad CSS scroll-padding-top es tu respuesta.
El primer enfoque es usar solo HTML para desplazarse al elemento con una id específica
html{height:3000px;scroll-behavior: smooth;} #readmore{position:absolute; top:2000px;} <a href="#readmore">Scroll down</a> <h1 id="readmore"> Read More </h1> El segundo enfoque es utilizar el método scrollIntoView , que desplaza el elemento especificado al área visible de la ventana del navegador.
const element = document.getElementById("readmore"); document.getElementById('btn').addEventListener('click', () => { element.scrollIntoView(); }) html{height:3000px;scroll-behavior: smooth;} #readmore{position:absolute; top:2000px;} <button id="btn">Scroll down</button> <h1 id="readmore"> Read More </h1> El tercer enfoque es codificar la ubicación específica donde me gustaría desplazarme, en este caso lo configuré en 2000px (altura)
const element = document.getElementById("readmore"); document.getElementById('btn').addEventListener('click', () => { window.scrollTo(0, 2000); }) html{height:3000px;scroll-behavior: smooth;} #readmore{position:absolute; top:2000px;} <button id="btn">Scroll down</button> <h1 id="readmore"> Read More </h1>