Содержание:
1.Настройка плавной прокрутки
2.Моментальная прокрутка к секции
На странице можно установить кнопку, при нажатии на которую можно перейти к нужной секции или виджету.
➢Шаг 1. Заходим в настройки секции (иконка капельки). В разделе «Параметры» указываем желаемый ID секции (якорь). Можно указать любое сочетание русских/английских букв и цифр без использования пробелов. Например, для секции с каталогом товара установим якорь с названием catalog
Проделаем вышеописанные действия на записи:
Если нужно настроить прокрутку к виджету, а не к секции, то выполняем те же действия, только в настройках стилей виджета (иконка капельки), а не в настройках секции.
➢Шаг 2. В настройках виджета «Кнопка» ( гаечный ключ ) во вкладке «Действие», выберите «Открыть страницу».
В строке для ввода ссылки прописываем имя якоря, но с решеткой в начале, например, #catalog (тот якорь, который добавили на секцию в первом шаге).
Проделаем вышеописанные действия на записи:
Готово! 🎉
Теперь при нажатии кнопку, экран будет плавно перемещаться к заданной секции или виджету. Проверить результат можно в предпросмотре, или на опубликованной странице, зайдя на нее по ссылке.
Для установки второго и последующих якорей (чтобы настроить прокрутку к разным секциям, по нажатию на разные кнопки), необходимо использовать уникальное парное название якоря.
Например:
- Первый якорь. В настройках секции: tovar
В настройках кнопки: #tovar
- Второй якорь. В настройках секции: blok1
В настройках кнопки: #blok1
- Третий якорь. В настройках секции: id1
В настройках кнопки: #id1
Можно настроить 2 вида прокрутки. Один из них - плавную прокрутку к секции, мы разобрали выше.
Также мы можем настроить быстрое перемещение к нужной секции, вместо плавного пролистывания. Выглядит быстрое перемещение так:
Для настройки резкого пролистывания выполняем Шаг 1, как мы это уже делали в первой части инструкции.
Шаг 2 выполняем немного иначе:
В настройках виджета «Кнопка» ( гаечный ключ ) во вкладке «Действие», выберите «Открыть страницу».
В строке для ввода ссылки прописываем: Адрес вашего сайта + символ # + id (тот якорь, который добавили на секцию в первом шаге).
Например: http://domain.ru/#catalog
где catalog– название установленного якоря в секции.
Обратите внимание, что между адресом страницы и решеткой должен быть слеш ( символ косой черты / )
Укажем адрес для перехода на скриншоте:
Рассмотрим на примере еще раз плавное перемещение и быстрое перемещение к нужной секции: