Якорные ссылки
По статистике менее 10% пользователей переходят дальше первой страницы по внутренним ссылкам. Поэтому дизайнеры стараются разместить как можно больше информации на первой странице. Как следствие, веб-страницы стали очень длинными по вертикали, и пользователю приходится прокручивать страницу до нужного места. Чтобы облегчить пользователю навигацию по таким длинным страницам используют якорные ссылки.
Якорная ссылка - ссылка на определенные места в документе — это полезный прием в веб-разработке, который позволяет пользователям быстро перемещаться к нужной информации на одной странице. Это особенно актуально для длинных страниц, таких как статьи, руководства, а также популярные сегодня лендинги.
При создании якорной ссылки необходимо указать id элемента, к которому будет происходит переход.
Алгоритм по созданию якорной ссылки
- Создание якоря:
- Для того чтобы создать якорь, необходимо добавить атрибут
id к элементу, на который будет вести ссылка. Например:
<h2 id="section1">Раздел 1</h2>
<p>Содержимое раздела 1...</p>
- Создание ссылки:
- Создайте ссылку, указывая
href с символом #, за которым следует значение id элемента. Например:
<a href="#section1">Перейти к Разделу 1</a>
Пример полного кода
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример якорных ссылок</title>
</head>
<body>
<h1>Содержание</h1>
<ul>
<li><a href="#section1">Перейти к Разделу 1</a></li>
<li><a href="#section2">Перейти к Разделу 2</a></li>
</ul>
<h2 id="section1">Раздел 1</h2>
<p>Содержимое раздела 1...</p>
<h2 id="section2">Раздел 2</h2>
<p>Содержимое раздела 2...</p>
</body>
</html>
Особенности
- Уникальность ID: Убедитесь, что значение
id уникально на странице. Дублирование может привести к непредсказуемому поведению ссылок.
- Если страница не имеет достаточной длины (помещается в окно браузера полностью), то якорные ссылки не будут ее прокручивать. В этом случае, для проверки работы ссылок необходимо уменьшить ширину окна, чтобы содержимое увеличилось в длину.
Можно сделать переход по ссылкам более плавным, используя CSS или JavaScript для добавления анимации. Как это реализовать мы посмотрим при изучении соотвествующих разделов.