Плавная прокрутка – это современная функция микроанимации, которая повышает удобство работы пользователя, позволяя легко перемещаться между разделами страницы. Вместо мгновенного перехода к разделам плавная прокрутка создает плавный и увлекательный переход. Это отличный способ заинтересовать пользователей, не перегружая их резкими скачками.

В этой статье мы рассмотрим два способа реализации плавной прокрутки:

• Использование CSS
• Использование JavaScript

Давайте сначала углубимся в использование CSS для плавной прокрутки.

Почему CSS обеспечивает плавную прокрутку?

CSS — самый простой и предпочтительный метод достижения плавной прокрутки. Это эффективно для производительности страницы, поскольку не загружается дополнительный JavaScript, что делает ее быстрее и легче. Давайте продолжим и реализуем это в нашем проекте.

Шаг 1. Создание панели навигации

Во-первых, давайте создадим простую панель навигации, содержащую наши навигационные ссылки. Эти ссылки перенаправят пользователей в определенные разделы страницы.

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

Шаг 2. Создание разделов
Теперь, когда у нас есть навигационные ссылки, давайте создадим соответствующие разделы.

Мы создали разделы для каждой навигационной ссылки.

Шаг 3. Добавление прокручиваемого контента
Чтобы плавная прокрутка работала, вашей странице необходимо достаточное количество контента для прокрутки. Давайте добавим немного фиктивного текста, чтобы страницу можно было прокручивать.

Наконец-то у нас достаточно контента, чтобы нашу страницу можно было прокручивать.

Шаг 4. Привязка навигации к разделам
Мы будем использовать атрибут href тега привязки для ссылки на разделы, к которым мы хотим прокрутиться. Просто добавьте #, а затем соответствующий идентификатор раздела.

По сути, на изображении выше мы используем атрибут href для ссылки на раздел, на который мы хотим, чтобы наши навигационные ссылки перешли.

Шаг 5. Присвойте соответствующий идентификатор (id) соответствующему разделу

Итак, сейчас мы просто присвоили каждую ссылку соответствующему разделу с помощью атрибута href и идентификаторов. Поэтому навигационная ссылка с href #section-one будет сопоставляться с разделом с идентификаторомsection-one

Теперь, когда мы нажимаем на ссылку навигации, мы попадаем в раздел.
Но мы заметили кое-что: все не гладко, страница перескакивает на раздел, что не очень приятно.

Шаг 6. Добавляем плавную прокрутку с помощью CSS
Чтобы включить плавную прокрутку, добавьте одно свойство CSS к элементу html.

Когда мы добавляем свойство Scroll-behavior в наш HTML, мы можем наблюдать эффект плавной прокрутки при нажатии на нашу навигационную ссылку.

Как это работает

Атрибут href в теге привязки традиционно используется для навигации на внешние страницы или URL-адреса. Однако в сочетании с #, за которым следует идентификатор раздела, тег привязки «просматривает» текущую страницу и прокручивает до соответствующего раздела. Добавив поведение прокрутки: Smooth; CSS, мы создаем плавный переход между разделами, улучшая общее впечатление от пользователя.

Другой способ добиться плавной прокрутки — использовать JAVASCRIPT.
Мы также можем добиться этого всего за несколько шагов:

Примечание: каждому разделу по-прежнему будет присвоен идентификатор, как и раньше.

Шаг 1. Создайте функцию ScrollIntoView

Мы можем создать функцию в JavaScript, которая будет использовать метод ScrollIntoView для достижения того же результата. Вот так:

Шаг 2. Встройте функцию при нажатии на ссылку

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

Это также можно изменить в зависимости от платформы, которую вы используете для разработки.

Это два простых способа добиться плавной прокрутки при создании интуитивно понятных веб-страниц.

Оставьте комментарий, если у вас есть вопрос или отзыв.