Estaba tratando de mover al usuario a una determinada posición (que es un HTMLElement con una identificación dada) cuando el usuario hace clic en un botón. Hasta ahora, he intentado usar el hashtag directamente y usar la etiqueta hash y agregar un oyente para escuchar el cambio del enrutador en useEffect, y enviar al usuario al elemento si se detecta el hashtag y ese elemento no está en el puerto de vista. No están trabajando en la mayor parte del tiempo. Agregué un bucle while para seguir activando la función, lo que lleva al usuario al elemento después de más de 20 llamadas en 7-8 segundos. Eso es simplemente molesto.

¿Alguien logra que el hashtag funcione correctamente? ¿Cómo se puede hacer eso?

Lo que he intentado hasta ahora: enlace de hashtag: enlace de hashtag fallido con una barra inclinada antes del hashtag: falló, no puedo ver una función de diferencia que mueva al usuario a la ubicación: falló, pero la función en sí se activó con éxito

Lo que estoy observando en este momento:

1. El usuario no se mueve en absoluto
2. El usuario se mueve, pero el proceso se detiene repentinamente antes de que el usuario alcance ese elemento. Usé el comportamiento suave como mi css global, por lo que este efecto es realmente extraño para mí.
3. Siga comprobando si el usuario no está llegando a esa posición y envíelo a ella si está marcado. No funciona como se esperaba. Verifica y envía al usuario y vuelve a enviar si otra verificación aún falla, pero el proceso es demasiado largo (7-8 segundos o más) y si el usuario se desplaza en el proceso, aún se arrastrará al elemento si no lo ha hecho. alcanzalo.

Código relacionado:

 function isInViewport(el: HTMLElement) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } useEffect(() => { const path = router.asPath; if (path && path.includes('/#')) { const sectionName = path.replace('/#', ''); const ele = document.getElementById(sectionName); if (ele) { const interval = setInterval(() => { if (!isInViewport(ele)) { console.log('triggered'); setTimeout(() => { ele.scrollIntoView({ behavior: "smooth" }) }, 2000) } else { clearInterval(interval); } }, 2000); } } }, [router.asPath]);