Посібник для веб-розробників

Автор

Плавне прокручування – це важлива техніка у веб-розробці, яка забезпечує приємний досвід користувачам. Замість різких стрибків при навігації сторінкою, плавне прокручування створює анімацію переміщення, що значно покращує зручність використання сайту.

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

Суть плавного прокручування полягає в тому, що сторінка переміщується до потрібного розділу не миттєво, а плавно. Це робить процес перегляду сайту більш комфортним та інтуїтивно зрозумілим.

Чому плавне прокручування важливе?

Плавне прокручування має ряд переваг, які позитивно впливають на досвід користувача:

  • Воно підвищує візуальну привабливість, замінюючи різкі переходи на плавні анімації, що додає елегантності вашому сайту.
  • Забезпечує більш плавний та приємний процес навігації, що стимулює користувачів глибше досліджувати ваш контент.
  • Спрощує навігацію, особливо на великих сторінках з багатьма розділами.

Для впровадження плавного прокручування, ми будемо використовувати JavaScript для модифікації стандартної поведінки прокручування.

HTML Структура

Перш за все, нам потрібно створити базову HTML-структуру з елементами для навігації між різними частинами сторінки.

 <html lang="uk">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
  <title>Плавне Прокручування: Посібник для Розробників</title>
  </head>
  <body>
  <nav>
  <ul>
  <li><a href="#section1">Розділ 1</a></li>
  <li><a href="#section2">Розділ 2</a></li>
  <li><a href="#section3">Розділ 3</a></li>
  </ul>
  </nav>
    <section id="section1">
    <h2>Розділ 1</h2>
    </section>
    <section id="section2">
    <h2>Розділ 2</h2>
    </section>
    <section id="section3">
    <h2>Розділ 3</h2>
    </section>
 <script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
  </body>
 </html>

Цей код містить навігаційну панель з трьома посиланнями. Кожне посилання має атрибут href, що відповідає ідентифікатору цільового розділу. Це дозволяє переходити до потрібного елемента при натисканні на посилання.

CSS Стилізація

Далі додамо CSS стилі, щоб зробити сторінку привабливою та зручною для перегляду. Скопіюйте наступний код до файлу style.css:

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
 body {
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
 nav {
 background: #fff;
 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
 position: sticky;
 top: 0;
 padding: 30px;
}
 nav ul {
 display: flex;
 gap: 10px;
 justify-content: center;
}
 nav ul li {
 list-style: none;
}
 nav ul li a {
 border-radius: 5px;
 border: 1.5px solid #909090;
 text-decoration: none;
 color: #333;
 padding: 10px 20px;
}
 section {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

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

JavaScript Реалізація

Щоб додати анімацію при натисканні на посилання, ми використаємо метод scrollIntoView(). Цей вбудований метод JavaScript дозволяє плавно прокрутити елемент у видиму область вікна браузера.

Коли ви викликаєте цей метод, браузер змінює положення прокручування контейнера, щоб зробити цільовий елемент видимим.

Додайте наступний код JavaScript до файлу script.js. Почніть зі слухання події DOMContentLoaded, яка сигналізує про повне завантаження DOM:

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Далі визначимо функцію makeLinksSmooth(). У ній ми оберемо всі посилання з навігації та додамо обробник події click до кожного з них:

function makeLinksSmooth() {
 const navLinks = document.querySelectorAll("nav a");
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

І наостанок, визначимо функцію smoothScroll(). Вона приймає об’єкт події, викликає preventDefault() щоб запобігти стандартній поведінці браузера, бере значення атрибута href та обирає цільовий елемент. Якщо цільовий елемент знайдено, метод scrollIntoView() викликається з параметром { behavior: "smooth" } щоб створити анімацію.

function smoothScroll(e) {
 e.preventDefault();
 const targetId = this.getAttribute("href");
 const targetElement = document.querySelector(targetId);

 if (targetElement) {
 targetElement.scrollIntoView({ behavior: "smooth" });
 }
}

З цим кодом, ваша веб-сторінка має плавно прокручуватися до кожного розділу при натисканні на посилання.

Для подальшого вдосконалення ефекту плавного прокручування, розглянемо наступні можливості:

Налаштування положення прокрутки

Ви можете налаштувати вертикальне положення прокрутки за допомогою властивості block в об’єкті параметрів. Використовуйте значення “start”, “center” або “end” для визначення положення елемента після прокручування:

 targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Додавання ефектів прискорення

Для створення більш природного та приємного переходу, додайте ефекти прискорення до анімації прокручування. Функції easing, наприклад ease-in, ease-out або спеціальні кубічні криві Безьє, дозволяють контролювати швидкість прокручування. Ви можете використовувати CSS властивість scroll-behavior або підключити JavaScript бібліотеку на кшталт “smooth-scroll”.

html {
 scroll-behavior: smooth;
 scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

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

Ви можете скористатися сайтом Чи можу я використовувати для перевірки підтримки браузерів. Розгляньте використання JavaScript бібліотеки або polyfill для забезпечення кросбраузерної сумісності.

Плавне прокручування є важливою деталлю, яка покращує взаємодію з користувачем, створюючи плавний та приємний ефект переходу. Використовуючи цей посібник, ви зможете легко реалізувати плавне прокручування на вашому сайті за допомогою JavaScript.

Налаштування поведінки прокручування, додавання ефектів прискорення та забезпечення кросбраузерної сумісності зроблять ваш сайт більш привабливим та зручним для користувачів.