Tengo un sitio web basado en React que incluye esta lista de enlaces en la parte superior de cada página:
<ul> <li><a href="/">HOME</a></li> <li><a href="/about-us">ABOUT US</a></li> <li><a href="/#contactSection">CONTACT US</a></li> </ul>En la parte inferior de la página de inicio tengo esta pieza de HTML:
<section id="contactSection" className="contactSection ptb_100"> <h2>Contact Us</h2> ...HTML FORM... </section> Cuando hago clic en el enlace Contáctenos en la parte superior de la página de inicio, Chrome se desplazará al HTML correcto identificado por la contactSection de contacto, sin embargo, Safari se desplazará a la parte superior de la página. Cuando hago clic en el enlace Contáctenos desde otra página del sitio, o si #contactSection en la barra de direcciones y presiono Intro, Safari se desplaza correctamente.
He mirado hilos que sugieren agregar / a href, pero eso no parece funcionar. ¿Alguna sugerencia?
ACTUALIZAR La causa del problema era un encabezado fijo en la parte superior de la página que hacía que Safari mantuviera la página en la parte superior. Al eliminar el encabezado adhesivo, se resolvió el problema, aunque no estoy seguro de por qué.
No debe agregar "/" para los enlaces de identificación de la misma página
html { scroll-behavior: smooth; } #myDiv { /* To enable scroll */ margin-top: 3000px; /* Extras (Not required) */ padding-bottom: 2em; background: red; } <a href="#myDiv"> Click mo to go to myDiv! </a> <div id="myDiv">This is myDiv</div>Prueba esto. En HTML
<li><span onclick="scrollToElement('#contactSection')">CONTACT US</span></li>y en JS
function scrollToElement(id) { const el = document.querySelector(id); if (el) { el.scrollIntoView(); } }