01 Июн 2023
2 мин
801

Как создать сайт с плавной прокруткой (smooth scrolling)

Узнайте, как создать сайт с плавной прокруткой, используя HTML, CSS и JavaScript, для улучшения пользовательского опыта.

Содержание

Плавная прокрутка или smooth scrolling — это техника, используемая в веб-разработке, которая позволяет пользователям плавно переходить к различным разделам страницы без резких переходов. Это может сильно улучшить пользовательский опыт на вашем сайте. В этой статье мы рассмотрим, как создать сайт с плавной прокруткой с использованием HTML, CSS и JavaScript.

HTML

Сначала создадим базовую структуру нашего сайта с использованием HTML. Добавим якорные ссылки, которые будут перенаправлять на определенные разделы страницы.

<!DOCTYPE html>
<html>
<head>
  <title>Сайт с плавной прокруткой</title>
</head>
<body>
  <nav>
    <a href="#section1">Раздел 1</a>
    <a href="#section2">Раздел 2</a>
    <a href="#section3">Раздел 3</a>
  </nav>

  <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>
</body>
</html>

CSS

Теперь добавим немного стилей с помощью CSS, чтобы сделать наш сайт более привлекательным. Вы можете настроить стили согласно вашим предпочтениям.

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

nav {
  background-color: #333;
  padding: 1rem;
}

nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1rem;
}

nav a:hover {
  color: #ccc;
}

section {
  height: 100vh;
  padding: 1rem;
}

#section1 {
  background-color: #f4f4f4;
}

#section2 {
  background-color: #e8e8e8;
}

#section3 {
  background-color: #ddd;
}

JavaScript

Наконец, добавим функциональность плавной прокрутки с помощью JavaScript. Мы будем использовать метод scrollIntoView с опцией behavior: 'smooth'.

document.querySelectorAll('a[href^="#"]').forEach(anchor =&gt; {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

И вот ваш сайт с плавной прокруткой готов! 😊 Теперь пользователи смогут навигировать по разделам страницы с плавным и приятным эффектом прокрутки.

Если вы хотите углубиться в изучение веб-разработки и научиться создавать еще более продвинутые сайты, обратите внимание на школу . Они предлагают качественное обучение и помогут вам стать опытным веб-разработчиком.

Добавить комментарий