Плавне прокручування – це техніка, яка використовується у веб-розробці для створення плавного прокручування для користувачів. Він покращує навігацію всередині веб-сторінки, анімуючи рух прокручування замість різкого стрибка за умовчанням.
Цей вичерпний посібник для веб-розробників допоможе реалізувати плавне прокручування за допомогою JavaScript.
Плавне прокручування – це коли веб-сторінка плавно прокручується до потрібного розділу, а не миттєво туди перескакує. Це робить процес прокручування приємнішим і безперебійним для користувача.
Переваги плавної прокрутки
Плавне прокручування може покращити взаємодію з користувачем веб-сторінки кількома способами:
- Він покращує візуальну привабливість, усуваючи різкі та різкі стрибки прокручування, додаючи нотку елегантності.
- Він сприяє залученню користувачів, забезпечуючи плавне та плавне прокручування. Це, у свою чергу, мотивує користувачів досліджувати вміст далі.
- Нарешті, плавне прокручування полегшує навігацію для користувачів, особливо під час роботи з великими веб-сторінками або переходу між різними розділами.
Щоб реалізувати плавне прокручування, ви можете змінити типову поведінку прокручування за допомогою JavaScript.
Структура HTML
Спочатку створіть необхідні елементи розмітки для різних вікон перегляду та навігації для прокручування між ними.
<!DOCTYPE html>
<html lang="en"><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>Smooth Scrolling Guide for Web Developers</title>
</head><body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav><section id="section1">
<h2>Section 1</h2>
</section><section id="section2">
<h2>Section 2</h2>
</section><section id="section3">
<h2>Section 3</h2>
</section><script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
</body></html>
Цей HTML складається з панелі навігації, що містить три теги прив’язки. Атрибут href кожного прив’язки вказує унікальний ідентифікатор цільового розділу (наприклад, розділ1, розділ2, розділ3). Це гарантує, що кожне посилання, на яке ви натискаєте, переходить до відповідного цільового елемента.
Стилі 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(). Метод scrollIntoView() — це вбудований метод JavaScript класу Element, який дозволяє прокручувати елемент у видиму область вікна браузера.
Коли ви викликаєте цей метод, браузер регулює положення прокручування контейнера елемента (наприклад, вікна або контейнера, який можна прокручувати), щоб зробити елемент видимим.
Додайте код JavaScript у файл script.js. Почніть з прослуховування події DOMContentLoaded, перш ніж робити щось інше. Це гарантує, що зворотній виклик виконується лише тоді, коли DOM повністю завантажено та готово до маніпулювання.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);
Далі визначте функцію makeLinksSmooth(). Почніть із вибору тегів прив’язки в навігації, оскільки ви захочете змінити їх поведінку. Потім перейдіть по кожному посиланню та додайте прослуховувач подій для події клацання.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a"); navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Нарешті, визначте функцію smoothScroll(), яка приймає об’єкт слухача подій. Викличте preventDefault(), щоб переконатися, що браузер не виконує стандартну дію, коли ви натискаєте посилання. Наведений нижче код замінить його.
Візьміть значення href поточного тегу прив’язки та збережіть його у змінній. Це значення має бути ідентифікатором цільового розділу з префіксом «#», тому використовуйте його, щоб вибрати елемент розділу за допомогою querySelector(). Якщо присутній targetElement, запустіть його метод scrollIntoView та передайте «плавну» поведінку в параметр об’єкта, щоб завершити ефект.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId); if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
При цьому ваша готова веб-сторінка буде плавно прокручуватися до кожного розділу, коли ви натискатимете посилання:
Щоб ще більше покращити плавне прокручування, ви можете точно налаштувати певні аспекти.
Налаштування положення прокрутки
Ви можете налаштувати вертикальне положення прокрутки за допомогою властивості блоку аргументу налаштувань. Використовуйте такі значення, як «початок», «центр» або «кінець», щоб визначити частину цільового елемента, до якої потрібно прокрутити:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Додавання ефектів полегшення
Застосуйте ефекти ослаблення до анімації прокручування, щоб створити більш природний і візуально привабливий перехід. Функції полегшення, такі як 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.
Точне налаштування поведінки прокручування, додавання ефектів полегшення та забезпечення кросбраузерної сумісності ще більше покращать плавне прокручування, роблячи ваші веб-сторінки більш привабливими та приємними для навігації.