1

Me sucede que estoy viendo una lista de elementos, y al clickear en cualquiera de ellos me dirijo a una nueva ruta donde tengo una vista mas completa de dicho elemento.

Si en la lista, yo scrolleo hacia abajo, al clickear en un elemento y abrirse la vista del mismo, esta se encuentra en una posición de scroll igual a la de la lista (es decir, si yo bajo demasiado en la lista, al entrar a ver el elemento estoy posicionado en el footer del sitio).

Para evitar esto intenté:

  1. Que antes de montarse la vista del elemento individual ocurra un window.scrollTo(0,0)

  2. Que antes de desmontarse la lista de elementos, ocurra un window.scrollTo(0,0)

  3. Según vi en la documentación de router hice esto:

    const router = createRouter({
      scrollBehavior (to, from, savedPosition) {
        return { top: 0 }
      }
    })
    

Con los 3 intentos me sucede lo mismo. Primero entra a la vista del elemento (scroll abajo), y luego veo como el scroll sube recorriendo toda la página.

Hay alguna forma de que el scroll se posicione arriba antes de cargar el componente??

2
  • ¿En qué ciclo de vida estás intentando hacer el window.scrollTo(0,0)? Podrías intentar hacerlo entro del setup(), que es de los primeros hooks en ejecutarse, para ver si así evitas que se vea la transición de subida de la página. el 11 sep. 2021 a las 14:48
  • sip, el setup reemplaza el onCreated pero sucede lo mismo (gracias por la aclaración, me faltó agregar en la pregunta que también probé esa opción), se renderiza la página con scroll al final, y luego sube
    – Agustin G.
    el 11 sep. 2021 a las 15:00

1 respuesta 1

0

Puedes hacer esto en el router:

    {
        path: '/random',
        name: 'random-component',
        component: RandomComponent,
        beforeEnter: (to, from) => {
            window.scrollTo(0, 0);
        }
    },
1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 19 dic. 2023 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.