Переход к конкретному шагу

Библиотека Intro.js предоставляет мощный инструмент для создания интерактивных руководств и пошаговых инструкций на веб-страницах. Одной из ключевых возможностей является управление шагами и возможность перехода к конкретному шагу. Это позволяет динамически менять маршрут пользователя по инструкции без необходимости повторного запуска всего тура.

Использование метода goToStep

Метод goToStep(step) используется для перехода к конкретному шагу тура. Параметр step может быть:

  • Номер шага (целое число, начиная с 1)
  • Идентификатор элемента (значение атрибута data-intro-step)

Пример использования:

var intro = introJs();
intro.setOptions({
    steps: [
        { 
            element: '#step1', 
            intro: 'Это первый шаг' 
        },
        { 
            element: '#step2', 
            intro: 'Это второй шаг' 
        },
        { 
            element: '#step3', 
            intro: 'Это третий шаг' 
        }
    ]
});

// Запуск тура
intro.start();

// Переход к третьему шагу
intro.goToStep(3).start();

Здесь важно помнить, что вызов goToStep не запускает тур сам по себе, поэтому необходимо добавить .start(), если тур ещё не активен.

Переход по идентификатору шага

Если шаги имеют атрибут data-step или уникальный data-intro-step, можно использовать имя элемента или ID шага для перехода:

<div id="profile" data-intro="Это профиль пользователя" data-step="2"></div>
intro.goToStep(2).start();

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

Управление переходами в ходе тура

Intro.js предоставляет события, которые позволяют интегрировать логику перехода к конкретным шагам:

  • onbeforechange – вызывается перед показом нового шага. Можно использовать для проверки условий.
  • onafterchange – вызывается после отображения шага.
  • onchange – срабатывает при любом переходе между шагами.

Пример условного перехода:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'step2') {
        // Пропускаем второй шаг и сразу идём к третьему
        intro.goToStep(3);
    }
});

Такой подход позволяет создавать ветвления внутри тура, изменяя последовательность шагов в зависимости от действий пользователя.

Комбинация с методами nextStep и previousStep

Методы nextStep() и previousStep() позволяют программно переходить по шагам в прямом и обратном направлении. В сочетании с goToStep() можно реализовать сложную навигацию по шагам:

document.querySelector('#skipStep2').addEventListener('click', function() {
    intro.goToStep(3);
});

Таким образом, пользователи могут пропускать определённые шаги или возвращаться к ранее пройденным шагам.

Особенности работы с асинхронным контентом

Если шаги находятся внутри элементов, которые появляются динамически (например, через AJAX или SPA), необходимо ждать рендеринга элемента перед вызовом goToStep():

fetch('/data').then(response => response.text()).then(html => {
    document.querySelector('#container').innerHTML = html;
    intro.goToStep(2).start();
});

Без этого метода библиотека не сможет найти элемент и шаг будет пропущен или вызовет ошибку.

Настройка анимации при переходе

При переходе к конкретному шагу можно управлять плавностью анимации и отображением подсказки:

intro.setOptions({
    scrollToElement: true,
    showStepNumbers: true
});
intro.goToStep(2).start();
  • scrollToElement: true – автоматически прокручивает страницу к выбранному элементу
  • showStepNumbers: true – отображает номера шагов, чтобы пользователь видел прогресс

Практические советы

  • Нумерация шагов в goToStep начинается с 1, а не с 0.
  • Вызывать .start() необходимо, если тур ещё не был запущен, иначе метод не сработает.
  • Проверять наличие элементов перед переходом к шагу, чтобы избежать ошибок.
  • Использование событий onbeforechange и onafterchange позволяет создавать динамические маршруты, меняя последовательность шагов в зависимости от действий пользователя.

Такой подход делает Intro.js гибкой библиотекой для построения интерактивных туров с возможностью точечного управления каждым шагом, адаптируемых под сложные пользовательские интерфейсы.

Оглавление