Как сделать закладку на странице сайта - якори в HTML
Иногда требуется сделать так, чтобы посетитель не просто перешел на страницу, но и попал на определенное ее место. Для этого используются якори HTML.
Якорь (анкор) – это название технологии закладки на странице сайта, то есть метки, на которую осуществляется возврат посетителя с любого другого места. Сделать закладку на странице сайта очень просто. Делать закладки можно не только на текущую страницу, но и на другие. HTML-якори могут быть очень полезны в разных случаях, например, для создания навигации на объемных страницах с подпунктами, для создания простых закладок и т.д.
Небольшой пример:
<h2>Ссылки на якори</h2>
<p><a href="#anchor1">Перейти к якорю 1</a></p>
<p><a href="#anchor2">Перейти к якорю 2</a></p>
<p><a href="#anchor3">Перейти к якорю 3</a></p>
<h2>Якори на странице</h2>
<p id="anchor1">Якорь на странице 1</p>
<p id="anchor2">Якорь на странице 2</p>
<p id="anchor3">Якорь на странице 3</p>
Как видно, достаточно прописать у нужного тега атрибут id и сослаться на него в ссылке после знака #. Ранее вместо id использовался атрибут name, но в HTML5 это изменилось. Если на странице содержится ссылка на якорь, но якоря нет - ошибка не произойдет. Такое свойство якорей часто используется в JavaScript для обработки нажатия на ссылки.
Важно заметить, что после клика на якорь в пределах текущей страницы, навигация в браузере меняется – кнопки назад и вперед учитывают сделанные клики. Поэтому придется нажать кнопку назад несколько раз, пока будет выполнен переход на предыдущую страницу. А для того, чтобы сделать плавный переход на якорь, необходимо использовать JavaScript.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку