Прокрутка к идентификатору из хеш-меню (#) на другую страницу работает некорректно. Я использую Locomotive и анимацию GSAP.

Вопрос или проблема

// Прокрутка к идентификатору, указанному в URL (если присутствует)
window.addEventListener('DOMContentLoaded', (event) => {
  const hash = window.location.hash; // Получить хэш из URL
  if (hash) {
    const targetElement = document.querySelector(hash); // Выберите элемент по идентификатору
    if (targetElement) {
      scroll.scrollTo(targetElement); // Используйте метод scrollTo из Locomotive Scroll
    }
  }
});
// Обновить Locomotive Scroll после загрузки всех изображений и медиа
window.addEventListener('load', () => {
  scroll.update(); // Пересчитать положение прокрутки, чтобы избежать пустого пространства
});

Ответ или решение

На ваш вопрос о том, почему прокрутка к элементу с определенным идентификатором (ID) при использовании Locomotive Scroll и GSAP не работает должным образом, я постараюсь предоставить подробное решение.

Проблема:

Когда вы используете хэш в URL (https://cutandshave.festcode.com/service#packages), и хотите, чтобы страница прокручивалась к элементу с ID packages, у вас могут возникнуть проблемы с синхронизацией Locomotive Scroll и обновлением DOM, особенно если контент загружается асинхронно. Ваша текущая реализация может не учитывать возможные задержки загрузки контента.

Решение:

1. Убедитесь, что Locomotive Scroll правильно инициализирован до того, как вы вызываете методы прокрутки.
2. Измените код, чтобы он дождался полной загрузки страницы и всех ресурсов (включая изображения), прежде чем выполнять прокрутку.
3. Используйте GSAP для анимации прокрутки, если требуется.

Пример кода:

// Подождите, пока DOM загружен
window.addEventListener('DOMContentLoaded', (event) => {
  // Убедитесь, что Locomotive Scroll инициализирован
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
  });

  // Проксмотрим, есть ли хэш в URL
  const hash = window.location.hash;
  if (hash) {
    // Получаем элемент с данным ID
    const targetElement = document.querySelector(hash);
    if (targetElement) {
      // Ждем, пока все изображения загрузятся
      window.addEventListener('load', () => {
        // Прокручиваем к элементу с анимацией
        scroll.scrollTo(targetElement, {
          duration: 1000, // Время анимации в миллисекундах
          easing: [0.25, 0.0, 0.35, 1.0] // Кривая Безье
        });
      });
    }
  }
});

// Обновление Locomotive Scroll после загрузки всех медиа
window.addEventListener('load', () => {
  scroll.update(); // Пересчет положения прокрутки
});

Объяснение кода:

1. Инициализация Locomotive Scroll: Важно убедиться, что вы правильно инициализировали Locomotive Scroll, создавая новый экземпляр на нужном контейнере.

2. Событие ‘DOMContentLoaded’: Мы добавляем обработчик события, чтобы дождаться загрузки DOM, а затем проверяем, есть ли хэш в URL.

3. Событие ‘load’: Мы добавляем дополнительный обработчик для load, чтобы дождаться загрузки всех изображений и медиафайлов, прежде чем выполнять прокрутку. Это особенно важно, если целевой элемент зависит от загрузки ресурсов (например, из-за изменяющегося контента или изображений).

4. GSAP Прокрутка: Используем метод scrollTo с опциями, чтобы задать продолжительность и кривую анимации, если необходимо.

Заключение:

Эти изменения должны помочь обеспечить корректную работу прокрутки к целевому элементу во всех случаях. Не забудьте заменить [data-scroll-container] на фактический селектор контейнера прокрутки в вашем коде. Если по-прежнему возникают проблемы, проверьте, правильно ли заданы идентификаторы в HTML и загружаются ли все необходимые ресурсы до выполнения скрипта.