08. scroll-top.css — стили кнопки «Наверх»

Маленький файл, но в нём есть несколько приёмов, которые полезно понять. Кнопка «Наверх» — это круг в правом нижнем углу, который появляется при прокрутке страницы. Пользователь может быстро вернуться к началу.

Зачем это отдельный файл

Технически стили кнопки «Наверх» могли бы жить в style.css. Но мы вынесли их сюда — по одной причине: изоляция.

Кнопка «Наверх» — независимый мини-компонент. Если однажды её дизайн захочется переделать (сделать прямоугольной, изменить цвет, добавить тень), правки коснутся только этого файла. Никакой опасности случайно задеть остальные стили сайта.

Полный файл

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 52px;
  height: 52px;
  background: #33ff33;
  color: #000000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  z-index: 999;
  transform: translateY(10px);
}

.scroll-top-btn:hover {
  background: #22cc22;
  transform: translateY(0) scale(1.05);
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn svg {
  display: block;
  width: 28px;
  height: 28px;
  stroke: #000000;
  stroke-width: 2.5;
}

@media (max-width: 768px) {
  .scroll-top-btn {
    width: 44px;
    height: 44px;
    bottom: 20px;
    right: 20px;
  }
  .scroll-top-btn svg {
    width: 22px;
    height: 22px;
  }
}

Четыре правила и один медиа-запрос. Разбираем.

Правило 1: базовая кнопка

Позиционирование: fixed

position: fixed;
bottom: 30px;
right: 30px;

position: fixed — «фиксированное позиционирование». Элемент вырывается из общего потока документа и «прилипает» к окну браузера. При прокрутке страницы он остаётся на месте — как приклеенный к стеклу.

bottom: 30px — расстояние от нижнего края окна. right: 30px — от правого. Отступы одинаковые, 30 пикселей — кнопка стоит «на отшибе», не прилипает вплотную к углу.

Форма и размеры

width: 52px;
height: 52px;
background: #33ff33;
border-radius: 50%;

Размер 52 × 52. Квадрат. border-radius: 50% — «скругление 50% от размера». У квадрата 52×52 это даёт идеальный круг.

Почему 50%, а не 26px? Оба дадут круг. Но 50% — универсально: если размер кнопки изменится (например, до 60×60), 50% всё равно даст круг. А 26px пришлось бы пересчитывать вручную.

Цвета

background: #33ff33;
color: #000000;

Фон — тот самый зелёный бренда #33ff33, что и у логотипа. Стрелка внутри — чёрная. Высокий контраст: видно издалека.

Тень и центрирование

box-shadow: 0 4px 12px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;

box-shadow — тень. Тут она заметнее, чем у секций: rgba(0,0,0,0.2) вместо 0.05. Кнопка «парит» над страницей — так пользователь понимает, что она «кликабельная» и независимая от контента.

display: flex вместе с align-items: center и justify-content: center центрируют SVG-стрелку внутри круга. Классический приём центрирования — flexbox.

Главное: скрытое состояние

opacity: 0;
visibility: hidden;

Два свойства — и оба нужны. Разберём почему.

opacity: 0 — полная прозрачность. Кнопка невидима, но всё ещё занимает место на странице.

visibility: hidden — невидимость. Отличие от opacity — visibility: hidden делает элемент недоступным для клика и невидимым для скринридера. Он как будто не существует.

Почему нужно два свойства, а не одно?

Плавность появления: transition

transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;

Что здесь происходит: три свойства перечислены через запятую, каждое со своими сроками и функциями плавности.

• opacity 0.3s ease — прозрачность меняется плавно за 0.3 секунды. Появление кнопки будет мягким.
• visibility 0.3s ease — видимость переключается мгновенно, но transition разрешает задержку синхронно с opacity. Кнопка «исчезает» через opacity, а потом становится невидимой.
• transform 0.2s ease — движение (смещение) — чуть быстрее, 0.2 секунды.

ease — тип кривой анимации. Есть варианты: linear (равномерно), ease (медленно-быстро-медленно), ease-in, ease-out. ease — универсальный, даёт ощущение «естественности».

Слой и смещение

z-index: 999;
transform: translateY(10px);

z-index: 999 — «слой по вертикали». Чем больше число, тем «ближе» элемент к пользователю. 999 — очень высокий, кнопка всегда поверх всего остального. Даже если где-то всплывёт модальное окно, кнопка «Наверх» не спрячется за ним (ну, если у модалки не будет z-index больше).

transform: translateY(10px) — сдвиг на 10 пикселей вниз. Кнопка изначально «спрятана» чуть ниже своего финального места. Когда появится — «поднимется» на эти 10 пикселей.

Приём называется «анимация появления снизу». Кнопка как будто «выглядывает» из-под экрана. Психологически это приятнее, чем простое «проявление» на месте.

Правило 2: hover

.scroll-top-btn:hover {
  background: #22cc22;
  transform: translateY(0) scale(1.05);
}

При наведении курсора:

• Цвет темнее: #33ff33 → #22cc22. Тот же зелёный, но на 15% темнее. Классический приём: «кнопка нажалась».
• translateY(0) — кнопка возвращается на исходную позицию (без сдвига вниз).
• scale(1.05) — увеличение на 5%. Кнопка чуть подрастает.

Совокупно: кнопка поднимается и чуть увеличивается. Пользователь чувствует обратную связь от интерфейса.

Правило 3: класс .show

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Это правило срабатывает, когда у кнопки есть класс show. Класс ставит JavaScript — когда пользователь прокрутил страницу больше чем на 300 пикселей.

Три свойства переключают кнопку из «скрыто» в «показано»:

• opacity: 1 — кнопка стала видимой.
• visibility: visible — кнопка доступна для клика.
• transform: translateY(0) — кнопка встала на своё место (без сдвига вниз).

Правило 4: SVG внутри

.scroll-top-btn svg {
  display: block;
  width: 28px;
  height: 28px;
  stroke: #000000;
  stroke-width: 2.5;
}

Стрелка — это SVG-иконка, вставленная прямо в HTML кнопки. Правила для неё:

• display: block — убирает нижний отступ у inline-SVG (по умолчанию под ним «висят» 3–4 пикселя).
• width: 28px; height: 28px; — размер иконки 28×28. Кнопка 52×52, значит, по 12 пикселей «воздуха» со всех сторон.
• stroke: #000000 — цвет линии (не заливки). Наша стрелка — это контур, а не фигура с заливкой.
• stroke-width: 2.5 — толщина линии. Побольше стандартной 1, чтобы стрелка была заметнее.

Медиа-запрос: мобильная версия

@media (max-width: 768px) {
  .scroll-top-btn {
    width: 44px;
    height: 44px;
    bottom: 20px;
    right: 20px;
  }
  .scroll-top-btn svg {
    width: 22px;
    height: 22px;
  }
}

На мобильных кнопка чуть меньше и ближе к краю.

• 52 → 44 пикселя. Большая кнопка на узком экране заслоняет содержимое. 44 — компромисс: всё ещё удобно нажимать пальцем (Apple рекомендует минимум 44×44 для тач-интерфейсов), но не «съедает» место.
• Отступ 30 → 20 пикселей. На маленьком экране каждый пиксель важен. 20 — это уже близко к краю, но не слипается с границей.
• SVG 28 → 22 пикселя. Пропорционально уменьшается, чтобы стрелка занимала те же ~53% от размера кнопки.

Итог

• scroll-top.css — отдельный файл, чтобы изолировать стили кнопки «Наверх».
• Кнопка скрыта через opacity: 0 + visibility: hidden — оба свойства нужны.
• Показывается через класс .show, который ставит JavaScript.
• Позиция — position: fixed, в правом нижнем углу, поверх всего (z-index: 999).
• При наведении — кнопка темнеет, приподнимается и увеличивается на 5%.
• На мобильных — уменьшается до 44×44 и отступы сокращаются до 20 пикселей.
• Цвет #33ff33 — единый с логотипом, активной ссылкой, фавиконом.

На этом Часть II. Стили завершена. Мы разобрали оба CSS-файла: style.css (9 секций) и scroll-top.css. Дальше — Часть III. Скрипты, где разберём script.js и scroll-top.js.