День 32 | Добавляем плавный скролл и навигацию

Плавный скролл и улучшенная навигация

Плавный скролл делает навигацию по странице более приятной. Вместо резкого прыжка страница плавно прокручивается к нужному разделу.

Плавный скролл через CSS

html {
  scroll-behavior: smooth;
}

Самое простое решение — добавить это свойство к html. Все якорные ссылки будут плавно прокручивать страницу.

Плавный скролл через JavaScript

Для большего контроля используйте JavaScript:

window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

Параметры scrollTo:

• top — позиция по вертикали (0 = верх страницы)
• behavior: 'smooth' — плавная прокрутка

Кнопка "Наверх"

Кнопка появляется при скролле вниз и позволяет быстро вернуться наверх:

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 300) {
    scrollTopBtn.classList.add('visible');
  } else {
    scrollTopBtn.classList.remove('visible');
  }
});

Что такое pageYOffset? Это расстояние от верха страницы до верха видимой области (сколько прокручено вниз).

Практическое задание

1. Добавьте плавный скролл через CSS
2. Создайте sticky навигацию
3. Добавьте кнопку "Наверх"
4. Реализуйте подсветку активного раздела при скролле