Как сделать плавный якорь css

Для создания плавного якоря на странице вам понадобятся два шага: добавление якорных ссылок в HTML-код и добавление CSS-стилей для плавного скролла к якорю.

Шаг 1: Добавление якорных ссылок в HTML-код

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

Пример:

<h2 id="services">Наши услуги</h2>

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

Пример:

<a href="#services">Перейти к услугам</a>

В этом коде #services — это идентификатор элемента страницы, которому будет осуществляться переход по нажатию на ссылку.

Шаг 2: Добавление CSS-стилей для плавного скролла к якорю

Для создания плавного скролла к якорю необходимо использовать псевдокласс :target и анимацию с помощью transition.

Пример:

:target {
  animation-duration: 1s;
  animation-name: scroll;
}

@keyframes scroll {
  from {
    margin-top: -100px; /* Расстояние от верхнего края экрана до якоря */
  }
  to {
    margin-top: 0;
  }
}

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

Кроме того, необходимо добавить transition к свойству margin-top, чтобы изменения происходили плавно.

Пример:

html {
  scroll-behavior: smooth;
}

Этот код добавит стандартную анимацию плавного скролла для всех ссылок на странице, которые имеют якорный href.

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