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

Конструктор сайтов

  • Руководство по интеграции

  • Инструкции

  • Расширения

  • Справочники

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

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

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

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

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

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

    Copy
    Full screen
    Small screen
    <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>

    1. Измените в коде следующие параметры:
      • 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.

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

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


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

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

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

    Была ли статья полезна?
    Спасибо!
    Что может сделать страницу еще лучше? Сообщение
    Жаль, что так произошло
    Расскажите, почему статья не была полезна. Сообщение
    Спасибо за обратную связь!
    Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
    Оценить страницу
    Оценить страницу
    Что может сделать страницу еще лучше?

    В другой раз

    Спасибо за обратную связь!

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

    Последнее обновление: 20 июля 2021

    Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

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