Чат Telegram
Группа ВКонтакте
Ссылка с якорем в 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 и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Комментарии (19)
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований