Что такое якорная ссылка?
Якорная ссылка – это ссылка внутри веб-страницы, которая позволяет перемещаться к определённому месту на этой же странице. Она особенно полезна для длинных документов, статей или страниц с навигацией.
1. Как работают якорные ссылки?
Якорная ссылка состоит из двух частей:
- Место назначения (якорь) – это элемент с атрибутом
id. - Ссылка – это обычный
<a>-тег, указывающий наidвhref.
Простой пример:
<h2 id="section1">Раздел 1</h2>
<p>Текст первого раздела...</p>
<a href="#section1">Перейти к Разделу 1</a>
При клике на ссылку страница прокрутится к элементу с id="section1".
2. Полный пример якорных ссылок
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример якорных ссылок</title>
</head>
<body>
<h1>Содержание</h1>
<ul>
<li><a href="#section1">Раздел 1</a></li>
<li><a href="#section2">Раздел 2</a></li>
<li><a href="#section3">Раздел 3</a></li>
</ul>
<h2 id="section1">Раздел 1</h2>
<p>Описание раздела 1...</p>
<h2 id="section2">Раздел 2</h2>
<p>Описание раздела 2...</p>
<h2 id="section3">Раздел 3</h2>
<p>Описание раздела 3...</p>
<a href="#top">Наверх</a> <!-- Возвращение в начало страницы -->
</body>
</html>
Как это работает?
- Верхнее меню содержит ссылки на разделы страницы (
href="#section1"). - Заголовки разделов имеют соответствующие
id(id="section1"). - Внизу есть ссылка
#top, которая возвращает пользователя в начало страницы.
3. Якорные ссылки на другую страницу
Можно создать ссылку на конкретный раздел другой страницы:
<a href="about.html#team">О нашей команде</a>
В файле about.html должен быть элемент с id="team".
4. Плавная прокрутка с помощью CSS
По умолчанию якорные ссылки мгновенно перемещают пользователя. Чтобы сделать плавную прокрутку, добавьте в CSS:
html {
scroll-behavior: smooth;
}
Итог
| Особенность | Описание |
|---|---|
| Основная цель | Перемещение внутри страницы |
| Тег | <a href="#id"> |
| Якорь | Любой элемент с id="..." |
| Можно использовать для | Оглавлений, меню, длинных статей |
| Дополнительное улучшение | scroll-behavior: smooth; |
Якорные ссылки помогают пользователям легко перемещаться по странице, особенно на длинных веб-документах.