0Pricing
Vue Academy · Урок

Настройка поведения прокрутки

scrollBehavior(to, from, savedPosition), плавная прокрутка, переход к хешу и восстановление позиции

«Настройка поведения прокрутки» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Управление прокруткой при навигации

В одностраничном приложении страница не перезагружается, поэтому браузер не сбрасывает прокрутку автоматически. Функция scrollBehavior Vue Router позволяет определить положение прокрутки страницы после каждой навигации.

Где это настраивается

Передайте scrollBehavior при создании маршрутизатора. Функция выполняется при каждой навигации.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

Три параметра

Функция получает to (целевой маршрут), from (текущий маршрут) и savedPosition. Последний параметр не равен null только при переходе с помощью кнопок «Назад» и «Вперёд» браузера.

Прокрутка вверх для новых маршрутов

Самое простое поведение — прокручивать страницу вверх при каждом переходе пользователя на новую страницу.

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

Восстановление положения при возврате

Если существует savedPosition, верните его, чтобы кнопка «Назад» вернула пользователя точно туда, где он находился, — так же работает обычный браузер.

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

Почему важен savedPosition

Без восстановления savedPosition нажатие кнопки «Назад» отправило бы пользователя в начало длинного списка, который он просматривал. Возврат этого значения сохраняет прежнее положение.

Прокрутка к якорю

Если целевой URL содержит хеш, например #section, прокрутите к этому элементу, вернув селектор el.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

Плавная прокрутка

Добавьте behavior: 'smooth', чтобы прокрутка выполнялась плавно, а не мгновенно перемещала страницу.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

Учет фиксированного заголовка

Закреплённый заголовок может закрывать целевой якорь. Добавьте top в качестве отступа, чтобы элемент оказался под заголовком.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

Отложенная прокрутка

Если содержимое загружается асинхронно, верните Promise, который после задержки разрешается с положением прокрутки, чтобы к моменту прокрутки целевой элемент уже существовал.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

Объединение правил

Полный обработчик сначала использует сохранённое положение, затем якорь из хеша и в остальных случаях прокручивает страницу вверх.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

Быстрая проверка

Проверьте свои знания об управлении прокруткой.

Итоги

scrollBehavior управляет прокруткой при навигации:

  • Функция получает to, from и savedPosition.
  • Возвращайте savedPosition, чтобы восстановить положение после нажатия кнопки «Назад».
  • Возвращайте { el: to.hash }, чтобы прокрутить к якорю.
  • Возвращайте { top: 0 } при переходе на новые маршруты.

Часто задаваемые вопросы

Урок «Настройка поведения прокрутки» бесплатный?

Да — полный текст урока «Настройка поведения прокрутки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка поведения прокрутки»?

scrollBehavior(to, from, savedPosition), плавная прокрутка, переход к хешу и восстановление позиции Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Настройка поведения прокрутки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Мета-поля маршрутов и типизация
  2. Переходы между маршрутами и анимация
  3. Настройка поведения прокрутки
  4. Программная навигация и useRouter
← Назад к Vue Academy