0
256
Vistas¿Cómo hacer que se pueda hacer clic en el encabezado?
Quiero tener la característica en mi sitio web que si hago clic en uno de los elementos de navegación de la barra superior en el encabezado, quiero estar en esta sección del sitio web. Por ejemplo, si hago clic aquí "Cómo": 
Quiero aterrizar aquí: 
¿Cómo puedo hacer eso?
2 Respuestas
Responde la pregunta0
Si está en la misma página, considere hacer que los encabezados vinculen objetivos . La premisa es que las etiquetas a en su navegador apuntan a una id en una etiqueta de encabezado, por ejemplo
<a href="#about-us">...</a> <!-- will take you to: --> <h2 id="about-us">About us</h2>0
Para obtener una experiencia de desplazamiento fluida en lugar de saltar a un ancla, puede lograrlo usando un eventListener en el encabezado. Luego, use getBoundingClientRect() del elemento how para obtener su posición en la página.
A continuación, puede desplazar el objeto de la ventana hasta la posición del elemento how.
let header = document.getElementById('hacker-header'); let how = document.getElementById('how'); header.addEventListener('click', () => { window.scrollTo({ top: how.getBoundingClientRect().y, left: how.getBoundingClientRect().x, behavior: 'smooth' }); }); body { background: black; } h1 { color:lime; } #high { height: 5000px; width:200px; background: linear-gradient(180deg, rgba(112,135,95,1) 0%, rgba(21,55,31,1) 35%, rgba(7,121,5,1) 100%); } <header id="hacker-header"> <h1>Hacker</h1> </header> <div id="high"> </div> <footer id="how"> <h1>How</h1> </footer>