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

Что такое ссылка-якорь

Якорь (анкор) - это метка с уникальным именем, находящаяся в определенном месте веб-страницы, которая предназначена для перехода к ней по ссылке. Анкор от англ. anchor (якорь, привязка) - текст ссылки, расположенный между тегами <a> и </a>, таким образом становится понятно, откуда взялось название "якорь".

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

 

Как создать ссылку-якорь в HTML

1. Вначале нужно сделать метку (вставить якорь) в соответствующем месте страницы сайта и дать ей имя. В примере ниже, якорю дано имя "link", но вы можете присвоить якорю своё имя. Обычно это слово обобщает смысл текста, на который вы даёте ссылку и пишется на латинице, может содержать и латинские буквы, и цифры. Количество якорей на странице может быть сколько угодно, но обязательное условие - имя якоря должно быть уникальным и не должно повторяться.

Для создания ссылки в HTML используется тег <a>. Атрибут <name> данного тега - задает имя якоря внутри документа.

Пример: <a name="link"></a>

 

Примечание: В XHTML и HTML5 вместо name для определения якоря нужно указывать атрибут id. Между <a> и </a> текст писать не обязательно, так как задача якоря указать место закладки на странице.

Пример: <a id="link"></a>

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

 

 

 

 

 

 

 

 

 

2. К якорю надо создать ссылку, кликнув по которой посетитель попадёт в то место, где находится якорь.

Для создания ссылки в HTML используется тег <a>. Атрибут <href> данного тега - задает адрес документа, куда следует перейти. Тег <a> с атрибутом <href> - обычная ссылка, к которой, для создания ссылки на якорь в конце URL адреса нужно добавить символ решетки # и имя якоря.

Пример: <a href="http://webadvisor.ru/#link">Текст для перехода </a>

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

Пример: <a href="#link">Текст для перехода </a>

Ссылка на якорь в HTML

 

 

 

 

 

 

Как создать ссылку-якорь в Joomla

Как создать ссылку-якорь покажу на примере своей статьи "Выбор хостинга". В этой статье мне нужно представить пользователю более подробную информацию о слове ДОМЕН, значение которого подробно описано в статье "Как создать сайт", находящейся на главной странице сайта.

Моя задача - создать якорь (закладку) в том месте страницы сайта, где начинается описание слова, а в статье "Выбор хостинга" сделать ссылку на страницу с якорем.

1. Вначале нужно создать якорь.
Для того, чтобы создать якорь, открываю для редактирования статью "Как создать сайт", ставлю курсор в начале заголовка раздела "Доменное имя" и кликаю по иконке якоря "Вставить/редактировать якорь". Даю имя якорю - domen и жму "Обновить".

В результате, перед разделом "Доменное имя", появился значок якоря. Сохраняю статью.

 

 

 

 

 

 

 

 

 

 

2. Затем нужно создать ссылку на страницу с якорем.
Для того, чтобы создать ссылку, открываю для редактирования статью "Выбор хостинга", выделяю слово ДОМЕН и кликаю по иконке ссылки "Вставить/редактировать ссылку".

Копирую URL-адрес страницы, где находится якорь, добавляю к URL-адресу символ # и название якоря domen. Указываю, что открывать страницу нужно в новом окне и жму "Обновить"

 

 

 

 

 

 

 

 

 

 

Вот и всё. Теперь, если кликнуть по слову ДОМЕН в статье Выбор хостинга, откроется страница статьи "Как создать сайт" в том месте, где установлен якорь. Значит всё выполнено правильно.

Комментарии   

 
0 #21 Евгений 11.09.2016 14:08
Спасибо. Очень удобно, если необходимо сослаться на конкретный участок текста, а не на всю страницу.
 
 
0 #20 Карина 11.08.2016 13:58
Спасибо за подробное описание, все получилось!
 
 
0 #19 Тюрин 04.05.2016 06:15
Цитирую Марина:
хорошая статья, но может подскажете, как сделать, чтобы по переходу по ссылке к якорю, переходило не на начало страницы, а с отступом от верха на 250рх. Пыталась в стилях прописать margin-top:250px; не помогло.


Если ещё актуально. Нужно поставить тег ниже или выше необходимого уровня. Т.е. если надо, чтобы по клику переходили сразу на заголовок, то тег надо ставить прямо над заголовком статьи или материала.
 
 
-1 #18 admin 29.06.2015 14:29
Вариант, который вы описали выше может сработать только с блочными элементами (можно поэкспериментир овать, преобразовав строчные элементы в блочные) или можно попробовать jquery.scrollTo .js.
 
 
0 #17 admin 29.06.2015 10:08
Цитирую Жанна:
Здравствуйте!
Вопрос: будут ли работать ссылки-якоря при переносе сайта с локального хостинга на удаленный?

Жанна, если к якорям вы создавали ссылки с относительным адресом, все будет работать. Если же вы создавали ссылки с абсолютным адресом (с именем домена), якоря будут работать, если имя домена внесено правильно.
 
 
+1 #16 Марина 29.06.2015 05:00
хорошая статья, но может подскажете, как сделать, чтобы по переходу по ссылке к якорю, переходило не на начало страницы, а с отступом от верха на 250рх. Пыталась в стилях прописать margin-top:250p x; не помогло.
 
 
0 #15 Жанна 28.06.2015 09:09
Здравствуйте!
Вопрос: будут ли работать ссылки-якоря при переносе сайта с локального хостинга на удаленный?
 
 
0 #14 Helena 25.06.2015 19:35
Спасибо! Всё объяснено доступно и верно.
 
 
0 #13 Вячеслав 11.04.2015 09:03
Добрый день!
Все понятно, что и как! Спасибо! Вопрос: а как сделать выделенным ту часть на которую ссылается якорь в хтмл??? Т.е. есть несколько коротких статей, 2-3 строки, соответственно и несколько якорей- ссылок, нужно что бы место куда ссылается якорь было выделено каким-нибудь фоном, что бы не путались в статьях… Это реально???
 
 
0 #12 Влад 12.03.2015 14:57
Спасибо, всё получилось.
 

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.