База знаний
по возможностям платформы

Плавная прокрутка (плавный скролл) целевой страницы

Здравствуйте, дорогие друзья!

Сегодня мы хотим рассказать вам о плавной прокрутке целевой страницы к нужному элементу.

Плавная прокрутка (или плавный скролл) позволяет посетителю лендинга перемещаться по разделам, не теряется визуальный контакт с содержимым оффера.

Можете посмотреть пример из магазина лендингов LPgenerator. На этой странице плавный скролл срабатывает при нажатии на кнопку “Заказать доставку”.

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

Итак, предлагаем воспользоваться подробным иллюстрированным руководством по созданию плавной прокрутки для одного элемента:

1) Откройте лендинг в визуальном редакторе LPgenerator

лендинг

2) Скопируйте код:

<script>
jq_144('#block-newID a').click(function(e){
// заменить #block-newID на ID элемента, по которому кликаем
e.preventDefault();
jq_144('body, html').animate({ scrollTop: jq_144('#block-newID').offset().top }, 1000);
// заменить #block-newID на ID элемента, к которому идет прокрутка
});
</script>

3) С помощью инструмента “Скрипты” вставьте скопированный код на страницу

Установите положение кода: “Перед тегом </BODY>”:

скрипты

скрипт

4) Пропишите в коде идентификатор кнопки, при клике на которую будет происходить прокрутка. Идентификатор прописывается внутри одинарных кавычек.

скролл

5) Посмотреть идентификатор элемента можно в его расширенных свойствах справа:

свойства

6) Внимание: если элемент, при нажатии на который запускается скроллинг, не является кнопкой, то в коде удалите букву ‘a’:

кнопка

7) Далее в четвертой строке кода, внутри одинарных кавычек, замените идентификатор элемента к которому будет осуществляться прокрутка:

скролл

Обратите внимание: после прокрутки элемент будет иметь нулевой отступ от верхней границы окна, то есть окажется в самой верхней части страницы.

Поэтому, если вы хотите перемещать посетителя на лид-форму, рекомендуем указать в коде идентификатор ее заголовка или элемента, который находится выше первого поля формы, например стрелочку:

стрелка

Внимание: плавный скроллинг не срабатывает для секций. Поэтому не указывайте идентификатор секций в коде.

8) По умолчанию время прокрутки до указанного элемента составляет 1000 мс = 1 сек. Вы можете сделать прокрутку медленнее (например, 5000 мс = 5 сек).

Пропишите нужное время в коде:

время

9) Проверьте положение скрипта, не забудьте задать название для скрипта. После этого сохраните изменения и сохраните целевую страницу в визуальном редакторе.

скрипты

10) Готово! Посмотрите, в нашем примере скрипт срабатывает при нажатии на кнопку в хедере “Заказать доставку”:

лендинг

По всем вопросам обращайтесь в службу технической поддержки по адресу support@lpgenerator.ru.

Высоких вам конверсий!

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 4 из 4
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Юрий

    Здравствуйте. Скажите, при создании кнопки надо указать ссылку, что там писать?
    И можно ли сделать скролл при нажатии на текст? Если да то как? Спасибо.

  • Avatar
    Юрий

    Все, разобрался, скрипт с ошибкой был

  • Avatar
    Шакир

    Скажите, как можно сделать такую же кнопку? Чтобы при наведении она меняла цвет.

  • Avatar
    Евгений Сидорин

    Большое спасибо!
    Все четко и понятно!

  • Avatar
    Никита

    "jq_144" это обязательно так называть? или можно своё придумать название?

  • Avatar
    Алена Балакина

    Здравствуйте, Шакир!

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

  • Avatar
    Алена Балакина

    Здравствуйте, Никита!

    jq_144 - это обязательная часть скрипта, изменять ее ни в коем случае нельзя.

    Если же Вы имеете ввиду просто название скрипта, то оно может быть любым http://prntscr.com/4cd6a8

  • Avatar
    Алена Гунгер

    Круто! Все получилось! Но только это скролл одной кнопки.
    У меня сверху расположено меню из нескольких кнопок, и мне нужен скролл каждой кнопки к разным местам страницы. Как это сделать? Жду ответ.

  • Avatar
    Алена Гунгер

    Догадалась. Надо добавить несколько таких отдельных скриптов на каждую кнопку.

  • Avatar
    Андрей

    Добрый день!
    Скажите пожалуйста, 1) что нужно прописывать в кнопке: просто #, или #block-newID (ID соответственно элемента).
    2) Может быть нужно добавить какой нибудь скрипт noConflict, или что нибудь прописать новое во 2ом и 3ем скрипте.
    Я копировал и кнопку и скрипт у себя на странице и менял в них только параметр #block-newID на соотетствующие кнопки и элемента. Но работает (плавно) только 1ая кнопка, которая была в шаблоне (её я и копировал). На каждую кнопку делал отдельный скрипт.

  • Avatar
    Алексей Воробьёв

    Спасибо! Отличная возможность, которая делает страницу приятнее!
    Я сделал статичное меню, на которое вставил несколько текстовых блоков, при клике на которые выполнялся скролл к разделам страницы.
    Столкнулся с таким неудобством - когда наводишь курсор мыши на текстовый блок, курсор не превращается в стрелку, как при наведении на ссылку. Поэтому интуитивно не совсем понятно, что на нее можно нажать.
    Решил проблему, сделав каждый текст ссылкой на якорь соответствующего раздела. После этого текст стал отображаться как ссылка (подчеркнутым и при наведении курсор становился стрелкой), а при клике выполняется плавная прокрутка. Супер!

  • Avatar
    Алена Балакина

    Здравствуйте, Андрей!

    1) Без разницы. Можно вставить решетку или ID блока 2)Дополнительных скриптов не требуется.
    Ваш вопрос нужно решать в индивидуальном порядке. Если проблема все еще актуальна, пришлите, пожалуйста, ссылку на редактор страницы, проверим корректность кода и настроек плавного скрола.

  • Avatar
    Алена Балакина

    Здравствуйте, Алексей!
    Спасибо за отзыв.
    Возможно, вместо текстовых блоков, проще добавить прозрачные кнопки с текстом, тогда при наведении курсор изменится, что будет указывать на кликабельность элемента.

  • Avatar
    максим

    Здравствуйте!
    Можно ли сделать плавную прокрутку для быстрых ссылок в яндекс.директе?
    Сейчас посетитель заходит по ссыке вида http://vibrotop1.ru/#block-new45 и мгновенно перемещается к указанному блоку.

  • Avatar
    Михаил Савченко

    Добрый день сделали все как сказно в руководстве, но плавный скрол не работает. в чем может быть причина. страница http://lpgenerator.ru/var/557523/#

  • Avatar
    Иван

    Добрый день! добавил скрипт на главную страницу, все работало. Потом добавил этот скрипт на другой странице : 4 кнопки - 4 перехода к текстовым блокам. Перестало работать все...http://lpgenerator.ru/var/625723/#

  • Avatar
    Иван

    Все заработало!

  • Avatar
    Сергей

    Здравствуйте! У меня в статичном меню находятся тексты "Доставка и оплата", "Отзывы", "Оформить заказ". Плавный скрол никак не хочет работать! Переадресацию делаю на соответствующие места, где заглавие раздела выглядит тоже в виде текста. Наверное, что-то я не то делаю. Как исправить подскажите, плиз!

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Наиболее вероятная причина - неправильно заданные идентификаторы блоков, к которым нужно производить перемещение. Не видя ситуации на странице - крайне сложно указать точную причину.

    Оптимальный вариант решения - написать в службу поддержки support@lpgenerator.ru и указать ссылку на страницу: так мы сможем изучить, в чём причина проблемы.

  • Avatar
    Максим Мурачёв

    Нашел более простое решение с нулевым отступом при скроле без добавления графических элементов...
    Можно просто добавить блок, оставить его прозрачным и без рамки и на него заякорить скролл. Проверил, все работает отлично.
    Если не понятно описал - пишите, дам подробнее с графикой

  • Avatar
    Павел

    Подскажите, пожалуйста, как сделать стрелку плавной прокрутки вверх?

  • Avatar
    Борис Колосов

    Здравствуйте, Павел!

    Направьте запрос на почту технической поддержки support@lpgenerator.ru и мы объясним как это можно сделать.

  • Avatar
    Роман

    Здравствуйте! У меня сделан плавный скролл на статичном меню и в таком случае целевой id накрывается статичным меню. Нельзя ли сделать отступ, чтобы скролл срабатывал рядом от места id?

  • Avatar
    Максим Гуйван

    Здравствуйте, Роман!

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

  • Avatar
    Роман

    А ну в принципе предыдущий блок можно укоротить и добавить новый размером со статическое меню и все красиво выходит)

  • Avatar
    Александр

    А если мне надо много скроллов - или много кнопок ведут на одно и то же место? Надо прописывать каждый раз новый скрипт? Или как-то в скрипт много переменных ввести можно?

  • Avatar
    Максим Гуйван

    Здравствуйте, Александр!

    Да, настроить список элементов, нажатие на которые будет приводить к прокрутке в одно и то же место, можно.

    Для этого в строке
    jq_144('#block-newID a').click(function(e)
    нужно внутри кавычек вписать через запятую идентификаторы кнопок, примерно так:
    ```
    jq_144('#block-new2 a','#block-new5 a','#block-new7 a').click(function(e)
    ```
    где запятыми разделяются идентификаторы кнопок.

    Обратите внимание, что неосторожное обращение с кодом скрипта может привести к "поломкам" страницы, поэтому будьте аккуратны.

  • Avatar
    Александр

    Максим, данный скрипт не работает, как не пытался. 2 Скрипта на разные Кнопка-Блок на странице получается сделать. Что-то другое не выходит сделать. (пытался две кнопки сделать на блок - не выходит) 

    Проблема решена множественными скриптами. Под каждую кнопку (на один блок) сделал 4 скрипта - работает, все 4 кнопки ссылаются на один блок. 

    Изменено: Александр
  • Avatar
    Максим Гуйван

    Александр, как упоминалось выше, операции со скриптами требуют некоторого опыта и понимания действий. Поэтому в большинстве случаев самое лучшее решение - это действительно, несколько отдельных скриптов - по одному на каждую из кнопок.
    Если возникнут затруднения - обращайтесь на support@lpgenerator.ru и указывайте адрес страницы, обязательно поможем!

  • Avatar
    Василий Прокофьев

    Для этого в строке
    jq_144('#block-newID a').click(function(e)
    нужно внутри кавычек вписать через запятую идентификаторы кнопок, примерно так:
    ```
    jq_144('#block-new2 a','#block-new5 a','#block-new7 a').click(function(e)
    ```
    где запятыми разделяются идентификаторы кнопок.

    К этому небольшой комментарий. Кавычки в начале и конце блока с перечислением кнопок. Каждую кнопку в кавычки не ставим. И всё заработало.
    jq_144('#block-new2 a,#block-new5 a,#block-new7 a').click(function(e)
    вот так правильно.

На базе технологии Zendesk