Чат PHP-разработчиков
Ссылка с якорем в HTML

Ссылка с якорем

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

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

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

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

<a href="#glava1">Глава 1</a>

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

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте страницу с именем check-anchor.html, которая по высоте будет занимать три экрана;
  • добавьте в середину её содержимого якорь. Например:
    <h2 id="glava1">Глава 1</h2>
  • откройте её в браузере с параметром #glava1. Например:
    /check-anchor.html#glava1
  • убедитесь, что страница автоматически пролисталась до нужного места
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (12)


doubledonea

В каких случаях используется такой формат якоря?

<a name="anchor">Якорь</a>
ivashkevich

Привет, использовались до HTML5, сегодня все используют id.
Дополнительную инфу по тегам советую смотреть на этом сайте - http://htmlbook.ru/html/a/name

doubledonea

Понял, спасибо.

gvardeitsev@mail.ru

Что-то никак не могу въехать в этот урок, как выполнить задание

ivashkevich

Домашку читали?

Dmixer

Артем, доброго времени суток! Благодарю Вас за полезную информацию!Спасибо за труды!
Скажите пожалуйста,как сделать "высоту в три экрана"? ДЗ я выполнил,все получилось,но пришлось использовать комбинации ctrl + c,ctrl + v =D Другого способа я к сожалению не нашел...

ivashkevich

Приветствую! А другого способа здесь и не надо.
Задача в том, чтобы с якорями научиться работать.
А наполнить страничку - почему бы и не копипастой. Не надо лишний раз усложнять :)

ahmetova

Здравствуйте! У меня затруднения по выполнению домашки. Создаем новую страницу, в середине ставим якорь <h2 id="glava1">Глава 1</h2>7

Не понимаю как сделать так, как вы пишите:
откройте её в браузере с параметром #glava1. Например:
/check-anchor.html#glava1

ivashkevich

Привет. Нужно сделать ссылку на этот файл, в конце которой добавить #glava1

ahmetova

Спасибо! Все, разобралась! Вот как сделала: в первом файле написала:
<a href = "check.html#glava1"> Якорь </a>
В новом файле:
<h2 id="glava1"> К этому месту должно выйти</h2>

ahmetova

Это я сделала якорь из одной страницы в другую. Если делать в одном файле, то получилось вот так.
Сам якорь(разместила в самом верху документа):
<a name = "ven"> Сюда </a>
Закладка(в самом конце):
<a href = "#ven"> Туда </a>

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований