23 Июн 2023
2 мин
75

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

«Узнайте, как создать впечатляющий сайт с плавной прокруткой между разделами, следуя нашим простым шагам в этой статье для новичков!»

Содержание

Плавная прокрутка между разделами сайта является популярным трендом в веб-дизайне и может сделать ваш сайт более динамичным и привлекательным для пользователей. В этой статье мы рассмотрим, как создать сайт с использованием плавной прокрутки между разделами.

Шаг 1: Разметка HTML

Сначала вам нужно создать разделы на вашем сайте, которые будут использоваться для плавной прокрутки. Вот пример разметки HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Smooth Scrolling Demo</title>
</head>
<body>
  <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
  </nav>
  <section id="section1">
    <h2>Section 1</h2>
    <p>Content for section 1.</p>
  </section>
  <section id="section2">
    <h2>Section 2</h2>
    <p>Content for section 2.</p>
  </section>
  <section id="section3">
    <h2>Section 3</h2>
    <p>Content for section 3.</p>
  </section>
</body>
</html>

Шаг 2: CSS стили

Теперь добавим некоторые стили CSS, чтобы сделать сайт более привлекательным и функциональным:

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

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  padding: 15px 0;
  z-index: 1000;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 15px;
}

section {
  width: 100%;
  height: 100vh;
  padding: 50px;
  background: #f4f4f4;
}

section:nth-child(odd) {
  background: #e8e8e8;
}

h2 {
  font-size: 36px;
}

Шаг 3: Добавление скрипта для плавной прокрутки

Для реализации плавной прокрутки вам потребуется JavaScript. В этом примере мы будем использовать библиотеку jQuery. Вам нужно будет добавить следующий скрипт перед закрывающим тегом </body>:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('nav a').on('click', function(event) {
    if (this.hash !== '') {
      event.preventDefault();

      var target = this.hash;
      $('html, body').animate({
        scrollTop: $(target).offset().top
      }, 800);
    }
  });
});
</script>

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

😉 Вот и все! Теперь у вас есть сайт с плавной прокруткой между разделами, который выглядит современно и привлекательно для пользователей. Надеюсь, что эта статья помогла вам разобраться с тем, как создать такой сайт. Если у вас возникнут вопросы, не стесняйтесь обращаться за помощью. Удачи вам в веб-разработке!

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