Плавне прокручування в будь-яке місце сторінки, Проверстка

У цій статті розглянемояк зробити плавне прокручування сторінки у вказане положення сторінки за кліком за посиланням, наприклад пункту меню навігації.

Така прокручування реалізується в 3 кроки:

1. Написання html-розмітки кнопки.

2. Додавання css-стилів.

3. Написання JavaScript коду, який і відповідає за роботу плавної прокрутки сторінки.

1. HTML – розмітка

1.1 Розмітка меню. Значення # у посиланні href має збігатися з id блоку, до якого повинна прокрутитися сторінка

1.2. Розмітка блоків

2. CSS – розмітка

Як такої спеціальної css-розмітки, що впливає на роботу цього скрипта немає. Все залежить від вашого дизайну.

3. Javascript

Насамперед підключаємо бібліотеку jQuery. Для цього перед тегом head, що закривається, вставляємо код (якщо у вас вже був підключений jQuery, то нічого підключати не потрібно.):

Далі наведено код, який можна вставити в тіло сторінки або вивести в окремий JavaScript файл. Скрипт бере вміст href пункту меню (elementClick), яким клацнули, потім шукає id з такою само значенням (destination) і потім відбувається переміщення сторінки в точку destination

Таким чином, при натисканні на посилання будь-якого пункту меню відбудеться анімована прокрутка до потрібного блоку.

800 – це час у мс, протягом якого потрібно зробити переміщення сторінки.

Якщо у вас недостатньо досвіду і ви хочете зробити можливість плавного переміщення сторінки на своєму сайті, то можете звернутися до нас. Також ви можете повністю замовити верстку сайту.

---