Как создать плавный скроллинг по якорным ссылкам с помощью CSS и JavaScript
Привет, друзья! Сегодня мы поговорим о том, как создать плавный скроллинг по якорным ссылкам на вашем сайте. Это улучшит пользовательский опыт, делая навигацию по странице более приятной и профессиональной.
Шаг 1: HTML структура
Сначала создадим базовую HTML структуру с якорными ссылками.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавный скроллинг</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<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>
</header>
<section id="section1">
<h2>Раздел 1</h2>
<p>Контент раздела 1.</p>
</section>
<section id="section2">
<h2>Раздел 2</h2>
<p>Контент раздела 2.</p>
</section>
<section id="section3">
<h2>Раздел 3</h2>
<p>Контент раздела 3.</p>
</section>
<script src="script.js"></script>
</body>
</html>
Шаг 2: CSS стилизация
Добавим базовые стили для нашего макета.
/* styles.css */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
header ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
header ul li {
margin: 0 1rem;
}
header ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 100px 20px;
margin-top: 60px;
}
section:nth-of-type(odd) {
background: #f4f4f4;
}
section:nth-of-type(even) {
background: #e4e4e4;
}
Шаг 3: JavaScript для плавного скроллинга
Теперь добавим скрипт для плавного скроллинга.
// script.js
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Заключение
Вот и всё! Теперь ваш сайт поддерживает плавный скроллинг по якорным ссылкам. Это простой способ улучшить навигацию и сделать ваш сайт более удобным для пользователей.
Если у вас есть вопросы или предложения, пишите их в комментариях. Удачного кодинга! 🚀