На стандартных веб-сайтах, где страницы перезагружаются, окно браузера всегда прокручивается вверх страницы при навигации. Но в приложениях с интерфейсными фреймворками, такими как Vue, где страницы не перезагружаются, это не поведение по умолчанию. Чтобы управлять этим, Vue Router имеет функцию scrollBehaviour(), которая может точно настроить поведение вашего приложения при навигации между страницами: включая возврат положения прокрутки в верхнюю часть страницы при навигации. Но в моем последнем проекте Vue (Vue 3, Vite, Vue Router 4) это не сработало. Вот как я это исправил.

TL;DR

Удалите overflow-x: hidden из любых родительских контейнеров либо на ваших представлениях/страницах, либо в CSS документа.

объяснитель

При переходе между страницами/маршрутами Vue Router автоматически поддерживает ту же позицию прокрутки, в которой она была на предыдущей странице, на новой странице. Звучит глупо. И, по моему скромному мнению, это не должно быть поведением по умолчанию. Но это особенно полезно, когда вы хотите использовать кнопку «Назад» в браузере, чтобы вернуться к определенной паре джинсов, которые вы просматривали на Amazon, вместо того, чтобы начинать с самого начала (очень удобно на сайтах электронной коммерции с длинной прокруткой).

Итак, вернемся к моему приложению.

Он не будет прокручиваться вверх при изменении маршрута. Что бы я ни делал, ничего не получалось. Я гуглил каждую вариацию и формулировку, чтобы выяснить, почему. Пришло много результатов, но все они указывали на Vue Router docs. Да, сказали они, вы можете заставить свои маршруты/страницы прокручиваться вверх, как обычный веб-сайт, используя Vue Router. Просто сделайте следующее:

// always scroll to top

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

//if you don't have a to, from or savedPosition value, remove them.

Или сделайте это:

scrollBehavior() {
  return { x: 0, y: 0 }
},

Или сделайте это:

scrollBehavior() {
  window.scrollTo(0, 0)
},

Или сделайте это внутри каждого компонента:

// Using Vue 3 setup/Composition

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  window.scrollTo(0, 0)
})
</script>

// Using Vue 2 Options

<script>

mounted: {
  window.scrollTo(0, 0)
}
</script>

Но нет. Ни один из них не сработал.

Я нашел несколько сообщений с людьми, имеющими ту же проблему. Все предложенные ответы были такими же, как и выше. И все равно у меня ничего не получалось.

Поэтому я спросил своего друга-разработчика Vue, сталкивалась ли он с этой проблемой раньше.

Да, сказал он.

Для него родительский контейнер с overflow-x: hidden в CSS будет противодействовать прокрутке Router вверх.

Это был момент удара по лицу. Я знал, что установил overflow-x: hidden в теле своего приложения, чтобы избежать нежелательного переполнения. Когда я удалил его, прокрутка вверх при изменении маршрута работала.

После удаления overflow: hidden и добавления этого в router/index.js я получил свой scrollTop:

scrollBehavior () {
  return { top: 0, left: 0 }
}

// The full router/index.js code:

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...],
  scrollBehavior() {
     return { top: 0, left: 0 }
   }
})

И это сработало:

 scrollBehavior() {
    return new Promise((resolve) => {
      resolve({ left: 0, top: 0 })
    })
  }

Итак, есть быстрое решение (того, что должно быть) простой проблемы (которая преследовала и бесила меня). Удалите overflow: hidden и установите указанные выше параметры в файле router/index.js.