» » Якорь в HTML | Закладка на веб-странице

Якорь в HTML | Закладка на веб-странице

 Якорь в HTML – это закладка на поле веб-страницы. Вся эта статья сделана закладками-якорями. Кликая по ссылкам в этой статье и перемещаясь по закладкам на этой странице можно легко понять, что такое якоря, зачем они нужны и как они работают.

  1. Пример использования якоря
  2. Действие якоря
  3. Показания к применению якоря
  4. Как создать и установить якорь на веб-странице
  5. Имя якоря
  6. Код якоря
    1. Код классического якоря (тег <а>)
    2. Код правильного якоря
    3. «невидимый» и «видимый» якоря
    4. Код самого простого якоря
    5. Якорь в заголовке, в списке, в таблице.
      Якорь в любом открывающем теге элемента HTML
      ...
  7. Ссылка на якорь
    1. Код ссылки на якорь, в пределах одной страницы
    2. Код ссылки на якорь, расположенный на другой странице
    3. Код ссылки на якорь, расположенный на другом домене (блоге, сайте)
    4. Абсолютная ссылка

(продолжение статьи – Зачем на сайте якоря)

Пример использования якоря в HTML

(к оглавлению)

Пример практического использования якорей в HTML – настоящая статья с меню-оглавлением. В этом случае, в ключевые разделы и заголовки текста статьи были установлены якоря, а пункты меню оглавления – выступают ссылками на них. Кликая по ссылкам в меню оглавления статьи, пользователь перемещается в нужные места и разделы в теле самой статьи.

Действие якоря

(к оглавлению)

Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен. Более подробно можно почитать в статье «Зачем на сайте якоря»

Показания к применению якоря

(к оглавлению)

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

Как создать и установить якорь на веб-странице

(к оглавлению)

Чтобы создать и установить якорь на веб-странице,
нужно вставить код якоря в код html-документа и
присвоить якорю уникальное имя в пределах его страницы.

Имя якоря

(к оглавлению)

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

На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).

Но! Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать. Например, у меня на всех страницах блога стоит якорь "zaglavie" и отлично работает на каждой странице.

Общий вид кода якоря

(к оглавлению)

(Более подробно тема изложена в материале «Теория якорного дела»)
Общий вид современного кода якоря в HTML представляет собой конструкцию из любого открывающего тега HTML и его атрибута, задающего уникальное имя (идентификатор) для якоря.

Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id

Код классического якоря (тег <а>)

(к оглавлению)

Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор)
задаётся через атрибуты тега <a>name или id
Таким образом, код классического якоря,
вставляемый в документ HTML будет иметь вид
<a name="razdel"></a> или <a id="razdel"></a>
где, слово "razdel" – это произвольное уникальное имя якоря
в пределах страницы его местонахождения.

«невидимый» и «видимый» якоря, анкор якоря

(к оглавлению)

Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть. Лично я такими якорями никогда не пользуюсь, поэтому упомянул про них исключительно ради объективности своего обзора.

Код невидимого якоря:
<a name="razdel"></a> или <a id="razdel"></a>
Код видимого якоря:
<a name="razdel">ТЕКСТ</a> или <a id="razdel"> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.

Код правильного якоря

(к оглавлению)

И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба ???

Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name="razdel"></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.

Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a id="razdel"></a>

Всё понятно. Атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>. И, если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно всунуть якорь только в тег <a>...

Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!

Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a id="razdel"></a>

Код самого простого якоря

(к оглавлению)

Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name="razdel"></a> или <a id="razdel"></a>?

Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id="razdel", который можно установить почти в любой открывающий тег HTML и XHTML!

Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td...), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id="razdel", где, естественно, слово "razdel" – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.

Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML...

(к оглавлению)

Таким образом, учитывая что код самого простого якоря имеет вид id="razdel", то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:

для заголовка (h1, h2, h3, h4, h5, h6)
<h1 id="razdel">Текст заголовка...
для списка (ul, ol, dl) и его элементов (li, dt, dd)
<ul id="razdel">тело списка...
<li id="razdel">тело элемента списка...
для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)
<table id="razdel">тело таблицы или её элемента...
... и так далее, и тому подобные конструкции, вида:
<div id="razdel"> или <p id="razdel">
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)

Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id="razdel" можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.

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

(к оглавлению)

Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря. Как и все остальные ссылки на свете, ссылки на якорь могут быть локальными и абсолютными. Локальные – это ссылки на якорь в пределах одного сайта (домена), абсолютные – это ссылки с указанием полного веб-пути к веб-странице и якорю на ней. Как правило, абсолютные ссылки используют для якорей расположенных на других сайтах (доменах). Количество ссылок на один якорь и место расположения этих ссылок ни чем не лимитировано и ни как не ограничено. На один и тот же якорь может быть сколько угодно ссылок, расположенным по всем страницам всех сайтов Интернета.

Все ссылки на якоря можно условно разделить на три группы:

1 группа – Локальные ссылки на якорь,
расположенный в пределах одной страницы
Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href="#razdel">ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.

Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.
2 группа – Локальные ссылки на якорь,
расположенный в пределах одного домена (сайта, блога)
Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href="/adress-stranici.html#razdel">ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.

Если якорь и ссылка на него находятся в пределах одного домена (сайта, блога), то имя домена в ссылке указывать не обязательно. Браузер сам отсчитает путь к документу и найдёт якорь на странице
3 группа – Абсолютные ссылки на якорь,
расположенный на другом домене (блоге, сайте)
Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href="http://tehnopost.info/adress-stranici.html#razdel">ТЕКСТ ССЫЛКИ</a> где, http://tehnopost.info/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.

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

(к оглавлению)

Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Якорь в HTML | Закладка на веб-странице на tehnopost.info
(продолжение статьи – Зачем на сайте якоря)

  1. Зачем на сайте якоря
  2. Теория якорного дела
  3. Якорь в HTML – как это работает
  4. Якоря и SEO (поисковая оптимизация)
  5. Ограничения на количество якорей
  6. Код якоря и ссылки на него,
    способы установки якорей ...

Ключевые слова статьи: HTML сайт тег программирование интернет

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:
  1. <
    Гость

    10 сентября 2014 13:28

    Спасибо! При помощи Вашей статьи сделала якорь на поле "оставить отзыв" в своём интернет-магазине, теперь когда отправляю покупателям письмо с просьбой оценить товар указываю ссылку на якорь.

  2. <
    Гость

    27 января 2015 13:44

    Вопрос: Как сделать ссылку с другой страницы на якорь на главной домена?
    В обычном виде она не работает сайт.ру#якорь

  3. <
    Технолог

    27 января 2015 17:41

    Цитата: Гость
    Как сделать ссылку с другой страницы на якорь на главной домена?
    В обычном виде она не работает сайт.ру#якорь

    Это, видимо, не работает якорь, сделанный через атрибут «name» тега «а». Попробуйте установить якорь вида id="razdel" в любой открывающий тег Вашего шаблона. У меня такое работает. Вот ссылка на якорь, на футер, на главной tehnopost.info: 

    http://tehnopost.info/#footer

  4. <
    Гость

    28 января 2015 00:25

    Полезная статья! Особенно если учесть что при вхождении  ключевика  в якорь  он выделяется как активная быстрая ссылка прямо в снипете гугл )))

  5. <
    Гость

    11 апреля 2015 12:05

    Вопрос: Как выделить участок текста, который открывается при переходе на якорь?

    Нужно что бы конкретное место текста при переходе на якорь было выделено каким-нибудь фоном, что бы не путались в рядом стоящих якорях статьи… Это реально???

    Например, есть несколько якорей, ведущих в статью, на рядом стоящие слова. Каждый якорь открывает 2-3 слова, рядом стоящего текста. Соответственно, при переходе на такие якоря будет открываться, практически одно и тоже место статьи.

  6. <
    Технолог

    11 апреля 2015 14:38

    Цитата: Гость
    Нужно что бы конкретное место текста при переходе на якорь было выделено каким-нибудь фоном, что бы не путались в рядом стоящих якорях статьи… Это реально???

    Это реально при использовании псевдокласса CSS target,
    который изменяет стиль открываемого фрагмента.

    Нужно поэкспериментировать, примерно в эту сторону:
    CSS
    <style>.red:target { background: red; } </style>
    HTML
    <a id="My_yakor" class="red">Текст с красным (red) фоном</a>

    (вместо тега «а» можно попробовать другие,
    например div, span, по ситуации)

  7. <
    Гость

    30 мая 2015 05:53

    Цитата: Технолог

    Нужно поэкспериментировать, примерно в эту сторону:
    CSS
    <style>.red:target { background: red; } </style>
    HTML
    <a id="My_yakor" class="red">Текст с красным (red) фоном</a>
    (вместо тега «а» можно попробовать другие,
    например div, span, по ситуации)

    Код с тегом «а» почему-то не пропускает текстовый редактор движка, TinyMCE, вместо
    <a id="My_yakor" class="red">Текст с красным (red) фоном</a>
    делает
    <a id="My_yakor" class="red"></a>Текст с красным (red) фоном
    а вот теги span, div и абзац (р) работают прекрасно.

    Единственный недостаток – заливка текста цветом у открытого  якоря остается до обновления страницы. Но, смирился. Рад и этому.

  8. <
    Гость

    9 июня 2015 00:54

    Спасибо огромное!

     

  9. <
    Гость

    9 июня 2015 04:37

    Лично мое мнение такое.
    С точки зрения SEO-технологии:

    Якорь <a name="razdel"></a> - это чисто "литературный" якорь для видимой текстовой части страницы, так сказать - для литературного контента. Именно этот якорь наиболее эффективно индексируется поисковиками и предпочитается ими.

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

    Якорь id="razdel", который вставляется в остальные открывающие теги HTML, кроме тега (а) - это чисто технический якорь. Он нужен только для разметки и правильного отображения вебдокуиента, например - для привязки ява-скрипта или CSS-стиля. Поисковики абсолютно не реагируют на такие якоря.

    Естественно, все якоря и все ссылки на них - будут работать. Вот только юзер должен понимать, что если он верстает код страницы - то нужно использовать якорь id="razdel", а если нужно сделать якорь в тексте видимого текста контента, да еще такой якорь, чтобы по нему ходили поисковики - то тогда лучше брать <a id="razdel"></a> а еще лучше - <a name="razdel"></a>.

    ИМХО.

  10. <
    Технолог

    9 июня 2015 05:23

    Цитата: Гость
    Вот только юзер должен понимать, что если он просто верстает код страницы - то нужно использовать якорь id="razdel", а если нужно сделать якорь в тексте видимого текста контента, да еще такой якорь, чтобы по нему ходили поисковики - то тогда лучше брать <a id="razdel"></a>, а еще лучше - <a name="razdel"></a>.
     

    Есть мнение, что поисковики никак не индексируют якоря, потому что они им не нужны. Для SEO нет никакой разницы, как этот якорь сделан. Для SEO важна ссылка на это якорь, потому что, поисковики ходят по ссылкам, а не по якорям. Это всем известно.

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

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

  11. <
    Гость

    26 августа 2015 22:33

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

    27 августа 2015 05:21

    Цитата: Гость
    Хочу прояснить один момент. Если на странице не прописан ни один якорь, то нельзя сделать закладку в браузере сразу ведущую к нужному куску страницы.
    Или для этого есть другие способы?

    Наверное, другого способа нет, кроме как прописать якорь на странице. Якоря для того и придуманы, чтобы наметить место на веб-странице для перехода к нему. Ведь ссылка для перехода на якорь формируется, вида http://adress-stranici.html#yakor". И, если якорь в ссылке не указан, или указан, но не прописан в теле страницы, то браузер будет просто открывать страницу с самого её начала. Как ему можно объяснить, какой именно кусок нас интересует?
  13. <
    Гость

    27 августа 2015 20:24

    Спасибо,  Технолог
  14. <
    Технолог

    1 сентября 2015 07:51

    Вот интересная конструкция якоря-ссылки:
    <a name="событие" href="#событие">Событие</a>
    При этом ссылка якорит сама себя.
  15. <
    Гость

    9 февраля 2016 08:38

    Цитата:
    И, как будет более правильно, <a name="razdel"></a> или <a id="razdel"></a>?
    Правильно будет делать якорь через id любого html-элемента страницы, кроме ссылки.
    Якорь в любом открывающем теге элемента HTML – это и есть правильные якори.
    Поясняю, почему.
    Работать будет любой якорь. Однако, с точки зрения поисковика – ссылка, то и есть ссылка. Тег А для робота – это всегда ссылка. И не важно, якорь это или нет. Если таких якорей на странице будет много – это будет спам. Яндекс к такому очень чувствителен.
    Например, именно на этой странице находится 16 якорей-ссылок, сделанных тегом "А". Соответственно, будет – 16 ссылок на эти якоря в пределах страницы, плюс еще 12 ссылок их этой страницы на другие страницы. Итого, 44 ссылки на 5000 печатных знаков. С точки зрения Яндекса, это есть 5...10% заспамленость ссылками. Яндекс считает, что нормальное соотношение – 1 ссылка на 200 печатных знаков, в среднем.
    Сам Яндекс нигде про это не пишет. Такая информация получена после наблюдения за сайтами через сервис для Seo анализа сайта – http://xtool.ru/. У них есть графа по Яндексу «Заспамленность ссылками:».
  16. <
    Гость

    13 марта 2016 14:33

    Спасибо за статью. А как можно сделать якоря с перезагрузкой, как у Вас в начале статьи? Я заметил, что адрес страницы не совпадает с адресом ссылки.
    Но когда кликаешь по ссылке, то адрес в строке браузера остается тот же, и только добавляется якорь.
  17. <
    Технолог

    15 марта 2016 08:14

    Цитата: Гость
    Я заметил, что адрес страницы не совпадает с адресом ссылки.
    Но когда кликаешь по ссылке, то адрес в строке браузера остается тот же, и только добавляется якорь.

    Если Вас я правильно понял, интересует, почему ссылка вида:
    http://tehnopost.info/10-yakor-ankor-na-veb-stranice.html#primer
    ведёт на якорь:
    http://tehnopost.info/html/10-yakor-ankor-na-veb-stranice.html#primer?

    Это особенности работы движка сайта. Он обрабатывает адреса страниц, начиная с ID новости и делает автоматическую переадресацию по категориям. Например, ссылка вида:
    http://tehnopost.info/10-yakor-ankor-na-veb-stranice.html#primer
    приведёт пользователя на якорь
    http://tehnopost.info/vasia/sasha/10-yakor-ankor-na-veb-stranice.html#primer
    при условии, что статья будет перемещена в категорию /vasia/sasha/

    При этом, пользователь не увидит изменения адреса в браузере.

    Маленькое дополнение к статье.
    Google не рекомендует указывать в ссылках на якорь лишнюю информацию и использовать абсолютные ссылки на якорь в пределах одного сайта. С точки зрения Google полный путь на якорь (с указанием домена) нужно указывать только в случае, если ссылка и якорь находятся на разных сайтах.
  18. <
    Гость

    15 апреля 2016 21:27

    Вопрос! А можно ли каким то образом скрыть значек # на ссылке на якорь в строке браузера чтобы он не был виден? И влияет ли он на проблему с индексированием доменного имени или страницы?
    К примеру чтобы было не www.servicef.com/#info а www.servicef.com/info
    Или так браузер не сможет открыть место куда ссылаеться якорь?
  19. <
    Технолог

    17 апреля 2016 09:04

    Цитата: Гость
    Вопрос! А можно ли каким то образом скрыть значек # на ссылке на якорь в строке браузера чтобы он не был виден? И влияет ли он на проблему с индексированием доменного имени или страницы?
    К примеру чтобы было не www.servicef.com/#info а www.servicef.com/info
    Или так браузер не сможет открыть место куда ссылается якорь?

    Конечно не сможет. Это два разных интернет-адреса. Так уж устроен интернет, что все материалы в нём имеют свои адреса. И эти адреса браузер показывает в своей адресной строке. Потому она так и называется.
  20. <
    Гость

    13 мая 2016 19:58

    Добрый день. А по какой причине якорь не работает, подскажете?) Ссылка на якорь встроена в код под изображение имеет вид: <a href="http://www..../#get"> , а сам якорь <a name="#get"></a>
    CMS - WordPress. Спасибо)
    1. <
      Технолог

      15 августа 2016 03:13

      Классическая ссылка на якорь должна иметь вид: <a href="http://www..../.html#get">, а сам якорь: <a name="get"></a>
      Если якорь находится на динамической странице, не имеющей окончания «.html», то тогда – ссылка на якорь должна иметь вид: <a href="http://www..../#get">, а сам якорь: <a id="get"></a>
      Вариант:
      <a href="http://www..../.php#get">
      и, <a id="get"></a>
      Прим. Тег <a> без атрибутов <name> или <href> считается не валидным. Его лучше заменить на любой другой тег, например <div> или <span>.
  21. <
    Гость

    23 сентября 2016 11:07

    При использовании якоря с абсолютной ссылкой на той же странице перезагрузки страницы не происходит, а хотелось бы.
    Кто бы рассказал, почему переход по якорю часто не позиционируется правильно - страница открывается гораздо ниже, чем якорь, как будто его положение отсчитывается не по верхней области отображения содержимого страницы, а по верхней границе окна браузера.
    Не в курсе, с чем это может быть связано?
    Если специально поставить курсор в строку браузера с абсолютной ссылкой, то переход происходит туда, куда надо. Но как это организовать?
    Похоже, какие-то javascriptы глючат.
  22. <
    Технолог

    23 сентября 2016 19:19

    Цитата: Гость
    При использовании якоря с абсолютной ссылкой на той же странице перезагрузки страницы не происходит, а хотелось бы.

    Якори в этой статье сделаны абсолютными ссылками. Переходы из оглавления статьи на якори-заголовки нормальные? С перезагрузкой страницы?

    Цитата: Гость
    Кто бы рассказал, почему переход по якорю часто не позиционируется правильно - страница открывается гораздо ниже, чем якорь, как будто его положение отсчитывается не по верхней области отображения содержимого страницы, а по верхней границе окна браузера.

    Контрольное слово – «часто». Т.е., бывает ДА, а бывает и НЕТ?
    Нужно поиграться и уловить закономерность, чтобы уйти от слова «часто».
  23. <
    Гость

    2 декабря 2016 01:55

    Спасибо! Пост оказался очень полезным!

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив