Здравствуйте, дорогие друзья!
Сегодня мы хотим рассказать вам о плавной прокрутке целевой страницы к нужному элементу.
Плавная прокрутка (или плавный скролл) позволяет посетителю лендинга перемещаться по разделам, не теряется визуальный контакт с содержимым оффера.
Можете посмотреть пример из магазина лендингов LPgenerator. На этой странице плавный скролл срабатывает при нажатии на кнопку “Заказать доставку”.
Хочется также обратить ваше внимание на то, что использование плавной прокрутки актуально и в сочетании со статичным меню. Ранее мы публиковали руководство по созданию статичного меню , которое также значительно упрощает навигацию на лендингах с большим объемом информации и позволяет повысить конверсию.
Итак, предлагаем воспользоваться подробным иллюстрированным руководством по созданию плавной прокрутки для одного элемента:
1) Откройте лендинг в визуальном редакторе LPgenerator
2) Скопируйте код:
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.
Высоких вам конверсий!
Здравствуйте. Скажите, при создании кнопки надо указать ссылку, что там писать?
И можно ли сделать скролл при нажатии на текст? Если да то как? Спасибо.
Все, разобрался, скрипт с ошибкой был
Скажите, как можно сделать такую же кнопку? Чтобы при наведении она меняла цвет.
Большое спасибо!
Все четко и понятно!
"jq_144" это обязательно так называть? или можно своё придумать название?
Здравствуйте, Шакир!
Для того, чтобы кнопка при наведении меняла цвет, в ее свойствах справа задайте активный и наведенный фон.
Здравствуйте, Никита!
jq_144 - это обязательная часть скрипта, изменять ее ни в коем случае нельзя.
Если же Вы имеете ввиду просто название скрипта, то оно может быть любым http://prntscr.com/4cd6a8
Круто! Все получилось! Но только это скролл одной кнопки.
У меня сверху расположено меню из нескольких кнопок, и мне нужен скролл каждой кнопки к разным местам страницы. Как это сделать? Жду ответ.
Догадалась. Надо добавить несколько таких отдельных скриптов на каждую кнопку.
Добрый день!
Скажите пожалуйста, 1) что нужно прописывать в кнопке: просто #, или #block-newID (ID соответственно элемента).
2) Может быть нужно добавить какой нибудь скрипт noConflict, или что нибудь прописать новое во 2ом и 3ем скрипте.
Я копировал и кнопку и скрипт у себя на странице и менял в них только параметр #block-newID на соотетствующие кнопки и элемента. Но работает (плавно) только 1ая кнопка, которая была в шаблоне (её я и копировал). На каждую кнопку делал отдельный скрипт.
Спасибо! Отличная возможность, которая делает страницу приятнее!
Я сделал статичное меню, на которое вставил несколько текстовых блоков, при клике на которые выполнялся скролл к разделам страницы.
Столкнулся с таким неудобством - когда наводишь курсор мыши на текстовый блок, курсор не превращается в стрелку, как при наведении на ссылку. Поэтому интуитивно не совсем понятно, что на нее можно нажать.
Решил проблему, сделав каждый текст ссылкой на якорь соответствующего раздела. После этого текст стал отображаться как ссылка (подчеркнутым и при наведении курсор становился стрелкой), а при клике выполняется плавная прокрутка. Супер!
Здравствуйте, Андрей!
1) Без разницы. Можно вставить решетку или ID блока 2)Дополнительных скриптов не требуется.
Ваш вопрос нужно решать в индивидуальном порядке. Если проблема все еще актуальна, пришлите, пожалуйста, ссылку на редактор страницы, проверим корректность кода и настроек плавного скрола.
Здравствуйте, Алексей!
Спасибо за отзыв.
Возможно, вместо текстовых блоков, проще добавить прозрачные кнопки с текстом, тогда при наведении курсор изменится, что будет указывать на кликабельность элемента.
Здравствуйте!
Можно ли сделать плавную прокрутку для быстрых ссылок в яндекс.директе?
Сейчас посетитель заходит по ссыке вида http://vibrotop1.ru/#block-new45 и мгновенно перемещается к указанному блоку.
Добрый день сделали все как сказно в руководстве, но плавный скрол не работает. в чем может быть причина. страница http://lpgenerator.ru/var/557523/#
Добрый день! добавил скрипт на главную страницу, все работало. Потом добавил этот скрипт на другой странице : 4 кнопки - 4 перехода к текстовым блокам. Перестало работать все...http://lpgenerator.ru/var/625723/#
Все заработало!
Здравствуйте! У меня в статичном меню находятся тексты "Доставка и оплата", "Отзывы", "Оформить заказ". Плавный скрол никак не хочет работать! Переадресацию делаю на соответствующие места, где заглавие раздела выглядит тоже в виде текста. Наверное, что-то я не то делаю. Как исправить подскажите, плиз!
Здравствуйте, Сергей!
Наиболее вероятная причина - неправильно заданные идентификаторы блоков, к которым нужно производить перемещение. Не видя ситуации на странице - крайне сложно указать точную причину.
Оптимальный вариант решения - написать в службу поддержки support@lpgenerator.ru и указать ссылку на страницу: так мы сможем изучить, в чём причина проблемы.
Нашел более простое решение с нулевым отступом при скроле без добавления графических элементов...
Можно просто добавить блок, оставить его прозрачным и без рамки и на него заякорить скролл. Проверил, все работает отлично.
Если не понятно описал - пишите, дам подробнее с графикой
Подскажите, пожалуйста, как сделать стрелку плавной прокрутки вверх?
Здравствуйте, Павел!
Направьте запрос на почту технической поддержки support@lpgenerator.ru и мы объясним как это можно сделать.
Здравствуйте! У меня сделан плавный скролл на статичном меню и в таком случае целевой id накрывается статичным меню. Нельзя ли сделать отступ, чтобы скролл срабатывал рядом от места id?
Здравствуйте, Роман!
Попробуйте указывать в качестве целевого ID идентификатор элемента, который находится немного выше того, который вам нужен. Вариант с указанием координат и отступов возможен, но требует умения работы с кодом.
А ну в принципе предыдущий блок можно укоротить и добавить новый размером со статическое меню и все красиво выходит)
А если мне надо много скроллов - или много кнопок ведут на одно и то же место? Надо прописывать каждый раз новый скрипт? Или как-то в скрипт много переменных ввести можно?
Здравствуйте, Александр!
Да, настроить список элементов, нажатие на которые будет приводить к прокрутке в одно и то же место, можно.
Для этого в строке
jq_144('#block-newID a').click(function(e)
нужно внутри кавычек вписать через запятую идентификаторы кнопок, примерно так:
```
jq_144('#block-new2 a','#block-new5 a','#block-new7 a').click(function(e)
```
где запятыми разделяются идентификаторы кнопок.
Обратите внимание, что неосторожное обращение с кодом скрипта может привести к "поломкам" страницы, поэтому будьте аккуратны.
Максим, данный скрипт не работает, как не пытался. 2 Скрипта на разные Кнопка-Блок на странице получается сделать. Что-то другое не выходит сделать. (пытался две кнопки сделать на блок - не выходит)
Проблема решена множественными скриптами. Под каждую кнопку (на один блок) сделал 4 скрипта - работает, все 4 кнопки ссылаются на один блок.
Александр, как упоминалось выше, операции со скриптами требуют некоторого опыта и понимания действий. Поэтому в большинстве случаев самое лучшее решение - это действительно, несколько отдельных скриптов - по одному на каждую из кнопок.
Если возникнут затруднения - обращайтесь на support@lpgenerator.ru и указывайте адрес страницы, обязательно поможем!
Для этого в строке
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)
вот так правильно.