Для создания плавного якоря на странице вам понадобятся два шага: добавление якорных ссылок в 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.
Обратите внимание, что поддержка анимации плавного скролла может различаться в разных браузерах.
