Если ссылки ведут на веб-страницы, то якорные ссылки ведут на конкретное места веб-страниц.
Якорная ссылка на внешнюю страницу
Якорная ссылка — абсолютно необходимая вещь, если вам нужно сослаться не просто на другую страницу, а предположим, на конкретный раздел статьи, что на другой странице.
Якорная ссылка в рамках одной страницы
Столь же необходима якорная ссылка в рамках одной страницы. Пользователю нужно только нажать на ссылку, после чего произойдет автоматический скроллинг страницы к нужному элементу, где установлен якорь.
Якорные ссылки, как дополнительные элементы навигации, могут сделать чтение и ориентацию по статье более удобными. Особенно если статья большая, и имеет сложную структуру.
Благодаря удобству, веб-страница становится более «юзер-френдли», что может положительно сказаться на SEO сайта. Кроме того, якорные ссылки, как и любые другие, являются отличным способом управления вниманием пользователя, а также эффективным элементом стратегии перелинковки между страницами.
Главная цель якорных ссылок — создать удобную навигацию на страницах сайта. Особенно это актуально для содержания статьи, если такое есть на странице.
Благодаря якорным ссылкам, ваше содержание становится не просто информативным, но и функциональным. Пользователь может быстро перейти к интереснейшему его разделу.
Из чего состоит якорная ссылка технически?
Ссылка-якорь состоит из:
- якоря — скрытого элемента, который устанавливается на любом участке статьи;
- ссылки, ведущей к якорному элементу.
Как создать якорную ссылку?
Например, необходимо связать пункт в содержании статьи, и раздел статьи. В этом случае, ссылка — это пункт в содержании; а якорь к которому ведет ссылка — название раздела.
1) Чтобы создать якорную ссылку, для начала нужно установить якорь — id (например - "Keyword-Search") к нужному HTML элементу страницы (в нашем примере это название раздела "Step 1: KeywordSearch"):
<h2 id="Keyword-Search">Step 1: Keyword Search</h2>
2) Затем — создать ссылку, добавив вместо адреса страницы, существующий id со знаком "#" спереди (например - "#Keyword-Search"):
<a href="#Keyword-Search">Stage 1: Keyword Search</a>
Если якорная ссылка ведет на вешнюю страницу (например: sitename.com/someurl), к ее адресу необходимо добавить id, заранее установленного якоря (например: sitename.com/someurl#mycustomword).
В результате, по нажатию на якорную ссылку должен произойти переход к якорю: выбранный элемент (в нашем примере — название раздела) должен прилипнуть к верхней части экрана.
Что делать если "плавающее" меню сайта закрывает элемент с установленным якорем?
То что "плавающие" меню закрывает текст с якорем, при переходе к нему по ссылке — это естественно, ведь якорь должен прилипать к верху страницы, а не к верху меню сайта, или других элементов. Однако это проблема.
Решить проблему можно, добавив отступ сверху для якорного элемента. Отступ должен быть не меньше высоты меню (т. е. если высота меню = 100px, значит и отступ нужно сделать таким же).
Как добавить отступ сверху для якорного элемента:
В CSS необходимо добавить пару волшебных строк к выбранному якорному элементу.
Например, необходимо добавить отступ в 100px. В качестве якоря используются подзаголовок H2, значит и отступ будем добавлять относительно H2 (но не всех H2, а только тех, которые с id).
h2[id]:target{ padding-top: 100px; margin-top: -100px; }
В результате, все подзаголовки H2, к которым применен ID (не важно какой) будут получать отступ сверху в 100 px, при прокрутке к ним, как к целевому якорю, после нажатия на якорную ссылку.
Визуально это должно выглядеть так, будто якорный элемент, при переходе к нему прилипает к меню, а не к верху экрана.
Как вы видите, с помощью ссылок-якорей можно выполнять ряд задач:
- повышение удобства пользования;
- создание структуры перелинковки между страницами;
- улучшение SEO, благодаря удобству, поведенческим факторам, а также анкорному тексту (тексту ссылки), который служит важным сигналом для поисковых систем (поэтому должен быть релевантным содержимому на который установлен якорь).
Задачи выполняемые якорными ссылками делают их важным элементом навигации между конкретными разделами веб-страниц, и прекрасным инструментом улучшения пользовательского опыта.