Что такое якорь на сайте

Добавление якоря в статью

Якорь — это «закладка» на определенном месте веб-страницы. При клике на связанной с ним ссылке браузер автоматически прокручивает страницу до обозначенного якорем места.

• оформить раздел «Содержание» для большой статьи со множеством подразделов;
• направить клиента к нужному месту в длинной инструкции;
• сослаться на конкретный пример в другой статье.

Есть два способа сделать это в статьях базы знаний:

• Добавление якоря через HTML
• Ссылки на подзаголовки через функционал Омнидеска

Добавление якоря через HTML

1. Создайте якорь

Перейдите в редакторе в режим исходного кода статьи, найдите нужное место и добавьте код с уникальным названием якоря:

Код для добавления якоря:

Текст, к которому должен осуществиться переход, можно оформить двумя способами:

б) Оставить после кода с именем якоря.

Текст, до которого прокрутится страница при нажатии на ссылку

Нюансы оформления якоря

• Название каждого якоря должно быть уникальным и может состоять из любых латинских букв с учетом регистра, и/или цифр, а также дефиса или нижнего подчеркивания;
• Нельзя использовать в названии якоря пробелы и служебные символы («,/><[]<>);
• Важно следить за тем, чтобы совпадали название якоря и название, указанное в ссылке на якорь;
• Если якорям дать одинаковые названия, они работать не будут;
• Установить якорь через исходный код можно в любой части текста;
• Количество якорей и ссылок на них на веб-странице не ограничено;
• Если ссылка на якорь есть, а самого якоря в статье нет – никакой ошибки не возникнет. Веб-страница останется открытой с начала и браузер не будет ее прокручивать;
• Если пользователь перешел по ссылке к якорю, после чего решил нажать в браузере кнопку «Назад», то его возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Для перехода к предыдущей странице нужно будет нажать кнопку «Назад» два раза.

2. Добавьте ссылку на якорь

Это делается через значок хештега #. Ссылка на якорь может быть относительной или абсолютной. В чем разница?

В относительной ссылке прописывается только путь к якорю указанием его уникального названия после значка хештега # — в базе знаний Омнидеска такая ссылка будет работать только в рамках одной веб-страницы:

#уникальное_название_якоря

В абсолютной ссылке всегда полностью прописан полный URL страницы и в конце указано уникальное название якоря после #. Абсолютную ссылку можно разместить где угодно, в том числе и на другом сайте:

https://example.com/knowledge_base/item/239226#уникальное_название_якоря

Подробнее о разнице между абсолютными и относительными ссылками на habr.ru.

Добавить ссылку можно двумя способами:

а) Через интерфейс редактора, как любую другую гиперссылку:

б) Через исходный код статьи.

В этом случае структура кода будет такая:

Относительная ссылка

Абсолютная ссылка

Ссылки на подзаголовки через функционал Омнидеска

Все подзаголовки в базе знаний в Омнидеске автоматически преобразуются в ссылки. Достаточно просто кликнуть на иконку напротив нужного подзаголовка, и ссылка с якорем на него добавится в буфер обмена. Можете использовать ее при оформлении содержания, чтобы сослаться на нужное место в тексте другой статьи или для вставки в ответ клиенту.

Ссылку можно оставить полностью без изменений, что важно для перехода с других страниц или сайтов. Если вам нужна относительная ссылка, которая подходит для перехода к определенному месту веб-страницы в рамках одной статьи базы знаний, просто удалите всё до значка хештега (https://support.omnidesk.ru/knowledge_base/item/103109/#scroll_to_0).

Минус этого способа в том, что вы сможете создать ссылки, которые прокручивают страницу лишь до подзаголовка, а не любой части страницы. Кроме того, если вы в будущем добавите или уберете подзаголовки в статье, ссылки на них автоматически видоизменятся (подзаголовки на веб-странице «нумеруются» по порядку) — а значит, старые ссылки перестанут работать корректно.

Якоря

Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id (пример 1). В имени допустимо писать русские, латинские буквы и символы, нельзя только пробел. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.

Пример 1. Создание якоря

      
.
 
Наверх





  

Имя ссылки на якорь начинается с решётки (#), после чего идёт имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов id и href совпадали (символ решётки не в счёт).

При щелчке по такой ссылке произойдёт переход к элементу в окне браузера.

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Ссылку также можно сделать на якорь на другой веб-странице и даже на другом сайте. Для этого в атрибуте href элемента надо указать полный адрес документа и в конце добавить символ решётки и имя якоря (пример 2).

Пример 2. Быстрый переход по Википедии

В данном примере показано создание ссылки на страницу Википедии, при открытии ссылки происходит переход к разделу с якорем HTML_5.1 .

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет. По этой причине решётку часто используют для пустых ссылок, когда ссылка нужна, но адрес пока не известен (пример 3) или нажатие обрабатывается программой на JavaScript.

Пример 3. Пустые ссылки

      
О нас Проекты Вакансии
  

Такого рода ссылки по своему виду ничем не отличаются от обычных ссылок — по ним можно щёлкать и они становятся при этом посещаемыми. Естественно, перехода на другую страницу при этом нет, но происходит переход к верхней части страницы, что особенно заметно при длинном тексте.

Ссылка-якорь

Мы нашли отличную статью, для размещения в блоге. Но статья длинная, и чтобы работать с ней было удобно, хорошо бы добавить к ней навигацию. Эта навигация не должна уводить читателя на другие страницы, а должна работать в пределах страницы со статьёй.

Для создания такой навигации используются ссылки-якоря. Ссылка-якорь — это обычная ссылка, в адресе которой используется символ # , после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке. Причём сам тег может быть любым: , ,

и так далее.

Вот так выглядит адрес, состоящий из одного якоря:

При щелчке по такой ссылке браузер найдёт на странице элемент с соответствующим атрибутом id и прокрутит окно страницы к нему.

Содержание первой главы
 

При этом перезагрузки страницы не произойдёт.

Интересно, что якорь также можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу по аналогии произойдёт прокрутка к заданной части этой страницы.

Якоря отлично подойдут для создания оглавления для статьи в этом посте.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Пример 9.1. Создание якоря

      
.
 
Наверх
  

Между тегами и текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега надо указать адрес документа и в конце добавить символ решетки # и имя закладки (пример 9.2).

Пример 9.2. Ссылка на закладку из другой веб-страницы

      
Перейти к нижней части текста
  

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.