Как сделать переход между страницами?

Ссылка скопирована
1 ответ

Здравствуйте! Подскажите пожалуйста как сделать переход между страницами, бесшовный
При прокрутке страницы до конца, менялся url и плавно появлялась следующая страница
На примере этого сайта
https://ind.studio/

Дополнительно:

пример очень плохой. сильно тормозит и не очень юзабельный.

Ответы:

Это явно шаблон с JS, посмотрите библиотеку velocity-js
В сети возможно, есть уже подобные шаблоны

Самому написать - аяксом.
Или использовать готовые плагины.

Нужно решить такую задачу?

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

Заказать помощь
Лучший ответ
1
Сергей Миронов Ответ

Эффект “докрутил до конца страницы, URL поменялся, плавно появилась следующая страница” обычно делается через бесконечную прокрутку + History API. Это не просто переход между страницами, а AJAX/PJAX-навигация, где контент следующей страницы подгружается без полной перезагрузки.

Технически схема такая:

  • отслеживаете приближение к низу страницы через IntersectionObserver;
  • загружаете HTML следующей страницы через fetch;
  • достаёте из ответа нужный контейнер контента;
  • добавляете его ниже текущего;
  • когда пользователь дошёл до нового блока, меняете URL через history.pushState();
  • повторно инициализируете скрипты, галереи, формы и аналитику.

Простейшая идея:

const marker = document.querySelector('.js-next-page-marker');
 
const observer = new IntersectionObserver(async (entries) => {
  if (!entries[0].isIntersecting) return;
 
  const nextUrl = marker.dataset.nextUrl;
  const response = await fetch(nextUrl);
  const html = await response.text();
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const nextContent = doc.querySelector('.site-main');
 
  document.querySelector('.site-main').append(nextContent);
  history.pushState({}, '', nextUrl);
});
 
observer.observe(marker);

const marker = document.querySelector('.js-next-page-marker'); const observer = new IntersectionObserver(async (entries) => { if (!entries[0].isIntersecting) return; const nextUrl = marker.dataset.nextUrl; const response = await fetch(nextUrl); const html = await response.text(); const doc = new DOMParser().parseFromString(html, 'text/html'); const nextContent = doc.querySelector('.site-main'); document.querySelector('.site-main').append(nextContent); history.pushState({}, '', nextUrl); }); observer.observe(marker);

Но в реальном проекте этот код нужно сильно доработать: защита от повторной загрузки, корректная пагинация, canonical, analytics pageview, lazy load, формы, комментарии, SEO и доступность.

С точки зрения UX такой эффект часто хуже обычной пагинации. Пользователь теряет контроль, назад в браузере может работать странно, страница становится тяжёлой, а SEO требует аккуратной настройки отдельных URL.

Итог: это делается через AJAX + History API, но ставить такой механизм стоит только если он действительно нужен. Для большинства WordPress-сайтов лучше нормальная пагинация или аккуратный Load More.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 1 ответ VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 1 ответ