Similar a esta publicación , mi caso no usa React Router o jQuery. Es solo una página y verticalmente larga. En cuanto al título, los enlaces de anclaje no saltan a la posición precisa ya que las imágenes no se cargan y no pueden calcular la ubicación precisa. Encontré una solución e intenté lo siguiente, pero no funcionó. ¿Cómo puedo resolverlo?

ACTUALIZACIÓN: como en el comentario, la configuración de los tamaños de imagen tampoco funcionó.

 export const useScrollToLocation = () => { const scrolledRef = useRef(false) const { hash } = useLocation() const hashRef = useRef(hash) useEffect(() => { if (hash) { // We want to reset if the hash has changed if (hashRef.current !== hash) { hashRef.current = hash scrolledRef.current = false } // only attempt to scroll if we haven't yet (this could have just reset above if hash changed) if (!scrolledRef.current) { const id = hash.replace('#', '') const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: 'smooth' }) scrolledRef.current = true } } } })

}

 function App() { return ( <> <useScrollToLocation> <Navigation /> <Hero /> <Concept /> <Shop /> <Footer /> </useScrollToLocation> </> ) } export default App