Tengo una transición de página que no funciona muy bien cuando vaya a la parte superior de una nueva ruta es instantáneo. Me gustaría esperar 100ms antes de que se desplaza automáticamente hasta la parte superior. El siguiente código no terminan de desplazamiento en todo. Es allí una manera de hacer esto?

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})
  • Podría marcar una respuesta pls…
InformationsquelleAutor frosty | 2017-03-01

5 Comentarios

  1. 32

    Este es soportado nativamente por Vue ahora, el uso de scrollBehaviour, como este:

    export default new Router({
      scrollBehavior() {
        return { x: 0, y: 0 };
      },
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        }
      ],
      mode: 'history'
    });
    

    Más aquí.

    • Esto funciona y es nativo de la Vue Router, debe ser la respuesta definitiva.
  2. 12

    Las otras respuestas no manejar casos de borde, tales como:

    1. Guardado
      Posición
      – La posición guardada se produce cuando el usuario hace clic en la parte de atrás o de adelante posiciones. Queremos mantener la ubicación que el usuario estaba buscando.
    2. Hash Enlaces – E. g. http://example.com/foo#bar debe navegar hasta el elemento de la página con un id de bar.
    3. Finalmente, en otros casos en los que se puede navegar a la parte superior de la página.

    Aquí está el código de ejemplo que se encarga de todo lo anterior:

    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes,
      scrollBehavior: (to, from, savedPosition) => {
        if (savedPosition) {
          return savedPosition;
        } else if (to.hash) {
          return {
            selector: to.hash
          };
        } else {
          return { x: 0, y: 0 };
        }
      }
    });
    
    • «Queremos mantener la ubicación que el usuario estaba buscando.» – Esto es malo UX. Los usuarios están acostumbrados a que se muestra la parte superior de la página, podría haber casos específicos para ello, pero esto no es normal hacer. No entiendo por qué estamos hablando de los hash de los enlaces, esto no está relacionado con la pregunta inicial.
    • Esta es una buena UX cuando estamos hablando sobre el botón atrás. El usuario es llevado de vuelta a la pantalla, ya que la última vez que vi a ella. Si nos subimos a la parte superior de la página cuando el usuario presione atrás, que sería momentáneamente desorientado. La mayoría de la gente va a copiar/pegar el código, creo que es útil para proporcionar detalles adicionales, siempre y cuando no detraiga de la respuesta principal.
  3. 9

    Si quieres que esto suceda en cada ruta, puede hacerlo en el antes de gancho en el router:

    const router = new VueRouter({ ... })
    
    router.beforeEach(function (to, from, next) { 
        setTimeout(() => {
            window.scrollTo(0, 0);
        }, 100);
        next();
    });
    

    Si usted está en una versión anterior de vue-router, utilice:

    router.beforeEach(function (transition) { 
        setTimeout(() => {
            window.scrollTo(0, 0);
        }, 100);
        transition.next();
    });
    
  4. 0

    Cuando se utiliza el lado del cliente de enrutamiento, es posible que desee desplazarse a la parte superior cuando se navega a una nueva ruta, o preservar el desplazamiento de la posición de las entradas del historial de como verdaderos recargar la página hace. vue-router le permite alcanzar estos y mejor aún, le permite personalizar completamente el comportamiento de desplazamiento en la ruta de navegación.

    Nota: esta característica sólo funciona si el navegador soporta history.pushState.

    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
    

    Con La Posición Guardada:

    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
    

    Para obtener más información

  5. -1

    Este no es probablemente la mejor manera, pero la adición de

    document.body.scrollTop = document.documentElement.scrollTop = 0;

    en una ruta del núcleo del componente (en este caso, Home) mounted() función de lograr lo que quiero.

    • Innecesaria, por lo que es compatible de forma nativa por Vue.

Dejar respuesta

Please enter your comment!
Please enter your name here