Как реализовать прокрутку страницы к указанному блоку

Как это работает

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

Как настроить

Использование готового решения

1. Откройте проект в Личном кабинете.
2. В боковом меню нажмите Site Builder.
3. Нажмите Открыть Site Builder.
4. Добавьте компонент Кнопка в блок, с которого будет начинаться прокрутка страницы, и укажите название кнопки.
5. Выберите тип компонента Ссылка и вставьте в поле любую ссылку.
6. Вставьте в блок Ваш код следующий код:

<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

7. Измените в коде следующие параметры:
   • scrollBlock — название CSS-класса блока, где будет находиться кнопка прокрутки. Возможные варианты:
     • .block--header (блок Заголовок)
     • .block--hero (блок Call-to-action)
     • .block--packs (блок Игровые пакеты)
   • scrollBlockNumber — порядковый номер блока с кнопкой прокрутки, начиная с 0.
   • scrollButtonNumber — порядковый номер кнопки прокрутки, начиная с 0.
   • scrollToBlockName — название CSS-класса блока, к которому настраивается прокрутка. Возможные варианты:
     • .block--header (блок Заголовок)
     • .block--hero (блок Call-to-action)
     • .block--html (блок Ваш код)
     • .block--packs (блок Игровые пакеты)
     • .block--description (блок Описание)
     • .block--gallery (блок Галерея)
     • .block--requirements (блок Требования)
     • .block--faq (блок Частые вопросы)
     • .block--embed (блок Виджеты социальных сетей)
     • .block--news (блок Новости)
     • .block--footer (блок Футер)
   • scrollToBlockNumber — порядковый номер блока, к которому настраивается прокрутка, начиная с 0.

8. Нажмите кнопку Просмотр, чтобы увидеть изменения.

Ознакомьтесь с видеоинструкцией к разделу:

Добавление собственного кода

1. В окне конструктора нажмите Добавить блок и выберите блок Ваш код.

2. Вставьте в блок собственный код.

Полезные ссылки