Якорь.
Якорь (Anchor / Веб-якорь) — это специальная метка в коде веб-страницы, привязанная к конкретному элементу (заголовку, блоку, абзацу), которая позволяет пользователю мгновенно переместиться (перекрутить страницу) к этому месту с помощью клика по гиперссылке.
В отличие от стандартных ссылок, открывающих новые страницы, ссылки-якори осуществляют навигацию внутри одного и того же документа. Это делает их незаменимым инструментом для управления вниманием на длинных посадочных страницах (лендингах) и в больших информационных материалах.
Как это устроено технически (в коде HTML)
Работа навигационных якорей реализуется с помощью двух базовых шагов в верстке:
- 1.Создание метки (Точки назначения): Любому HTML-тегу (например, заголовку <h2>) присваивается уникальный идентификатор через атрибут id.
html
<h2 id="contacts">Наши контакты</h2>
Используйте код с осторожностью.
- 2.Создание ссылки (Точки отправления): В теге ссылки <a> в атрибуте href указывается этот идентификатор, но обязательно со знаком решетки (#) перед ним.
html
<a href="#contacts">Перейти к контактам</a>
Используйте код с осторожностью.
Когда пользователь нажимает на такую ссылку, браузер считывает значение после символа # и мгновенно прокручивает страницу так, чтобы элемент с соответствующим id оказался вверху экрана. При этом URL-адрес в строке браузера меняется на ://site.com. По такой ссылке можно перейти даже с другого сайта.
Основные сферы применения в UX/UI
- Оглавление (Table of Contents): Размещение кликабельного списка разделов в начале длинных статей или документаций, позволяющее быстро перейти к интересующей теме.
- Кнопка «Наверх» (Back to Top): Небольшая плавающая стрелка в углу экрана, которая возвращает пользователя к шапке сайта при клике (якорем выступает тег <body> или самый первый блок).
- Навигация в лендингах (Landing Pages): Меню одностраничного сайта полностью состоит из ссылок-якорей, плавно перемещающих пользователя по смысловым экранам: «О нас», «Услуги», «Отзывы», «Форма заявки».
Использование термина в других сферах дизайна и ИТ
Помимо веб-верстки, метафора «якоря» часто используется в смежных дисциплинах:
- 1.В графических редакторах (Figma, Photoshop, Illustrator): «Якорная точка» (Anchor point) — это базовая опорная точка на векторном контуре, которая фиксирует положение линии. Изменяя положение якорных точек и их направляющих (усов), дизайнер управляет формой векторной фигуры.
- 2.В психологии UI-дизайна (Эффект якоря / Anchoring): Когнитивное искажение, при котором пользователь слишком сильно полагается на первую увиденную информацию (например, если рядом со старой зачеркнутой ценой в $1000 написать новую цену в $299, то $299 покажется человеку крайне выгодной сделкой, так как первая цена послужила ментальным «якорем»).
Статьи по теме
Проблемы в оформлении айдентики и упаковки
Как Google изменил привычки пользователей
