El problema es que va a la mitad de la página cada vez que navego a un enlace en NextJS :
<Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link>Entonces, creo que el problema es que el enlace está en el medio de la página, por lo que cuando hago clic en el enlace, permanece en la misma posición en la que hizo clic en el enlace y no va a la parte superior de la página. Sé que no tiene sentido.
Intenté agregar cosas como scroll={true} o scroll={false} al <Link> . Intenté agregar height: 100% a html y cuerpo en CSS . Intenté agregar scroll-behavior: smooth; y otras cosas. El problema aún permanece.
Aquí está el video: https://drive.google.com/file/d/1CCgFCJb1fl9RRYmW5yp41US-0yuSqpfj/view?usp=sharing
Solución temporal: es no usar Link y solo usar la etiqueta <a> habitual. Porque <Link> no hace que la página se vuelva a cargar , mientras que la etiqueta <a> vuelve a cargar la página cuando se navega a otra página. por lo tanto, si la página se vuelve a cargar cuando hace clic en el enlace, siempre comienza en la parte superior.
Nota: probé todas las soluciones a continuación.
7
Hace esto porque href="#" es un ancla vacía. Los anclajes se utilizan para vincular a puntos específicos dentro de una página. Un ancla vacía hace que la página vuelva a la parte superior.
Para solucionar esto en su javascript, debe evitar que el evento de clic se propague o "burbujee" en el DOM. Puede hacer esto devolviendo falso desde su evento de clic.
$(document).ready(function() { $(".emails").bind("click",function() { $("div#container").toggle(); return false; // prevent propagation }) }); También puede hacer que el evento esté disponible en la función de controlador de clics del enlace utilizando un argumento, generalmente denominado e . Tener acceso al evento le permite llamar a métodos como .preventDefault() .
$(document).ready(function() { $(".emails").bind("click", function(event) { $("div#container").toggle(); event.preventDefault(); // this can also go at the start of the method if you prefer }) });Intente configurar scrollRestoration en algún componente raíz.
history.scrollRestoration = 'manual';puedes usar este gancho y poner id como su dependencia
useEffect(() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }, [id])si lo usa en nextjs, debe poner una condición if de esta manera
useEffect(() => { if(typeof window !== 'undefined'){ window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); } }, [id])