Плавне прокручування (плавний скролл) цільової сторінки

Вітаю, дорогі друзі!

Сьогодні ми хочемо розповісти вам про плавну прокрутку цільової сторінки до потрібного елементу.

Плавне прокручування (або плавний скролл) дозволяє відвідувачеві Лендінзі переміщатися по розділах, не губиться візуальний контакт з вмістом оффера.

Можете подивитися приклад з магазину Лендінзі LPgenerator. На цій сторінці плавний скролл спрацьовує при натисканні на кнопку "Замовити доставку".

Хочеться також звернути вашу увагу на те, що використання плавної прокрутки актуально і в поєднанні зі статичним меню. Раніше ми публікували керівництво по створенню статичного меню. яке також значно спрощує навігацію на Лендінзі з великим об'ємом інформації і дозволяє підвищити конверсію.

Отже, пропонуємо скористатися докладним ілюстрованим керівництвом по створенню плавної прокрутки для одного елемента:

2) Треба скопіювати код:

3) За допомогою інструменту "Скрипти" вставте скопійований код на сторінку

Встановіть положення коду: "Перед тегом ":

4) Пропишіть в коді ідентифікатор кнопки, при кліці на яку буде відбуватися прокрутка. Ідентифікатор прописується всередині одинарних лапок.

5) Подивитися ідентифікатор елемента можна в його розширених властивостях праворуч:

6) Увага: якщо елемент, при натисканні на який запускається скролінг, не є кнопкою, то в коді видаліть літеру 'a':

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

Зверніть увагу: після прокрутки елемент буде мати нульовий відступ від верхньої межі вікна, тобто виявиться в самій верхній частині сторінки.

Увага: плавний скролінг не спрацьовує для секцій. Тому не вказуйте ідентифікатор секцій в коді.

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

Пропишіть потрібний час в коді:

10) Готово! Подивіться, в нашому прикладі скрипт спрацьовує при натисканні на кнопку в хедері "Замовити доставку":

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

Максим Гуйван,
керівник відділу технічної підтримки LPgenerator

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.