Что такое якорная ссылка?
Якорная ссылка – это ссылка внутри веб-страницы, которая позволяет перемещаться к определённому месту на этой же странице. Она особенно полезна для длинных документов, статей или страниц с навигацией.
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; |
Якорные ссылки помогают пользователям легко перемещаться по странице, особенно на длинных веб-документах.