Каждый пользователь всемирной паутины хотя бы раз сталкивался с якорными ссылками в больших статьях или, например, в Википедии. Якоря используют в навигации страницы для того, чтобы быстро переходить к нужному описанию, а не скроллить вечность к нужному месту.⠀
Такие ссылки важны для структурирования статей и меню лендингов. С их помощью контент логично разбивается на блоки и настраивается тематическая навигация.
Как поставить якорь в HTML ⬇️
▪️ открыть HTML код страницы в любом редакторе кода, найти нужный фрагмент текста или блок для перехода;
▪️ если в этом месте уже есть тег, дописать ему атрибут ID и в кавычках указать уникальное имя якоря;
▪️ если тег отсутствует, то нужно его написать, обычно это div или span или просто поставить пустой HTML тег без содержимого.⠀
Как вставить якорную ссылку:
— написать код обычной ссылки;
— атрибуте href поставить сначала символ #
— написать название ранее заданного якоря.⠀
Если всё сделали верно, то при клике на созданную ссылку страница должна прокручиваться к блоку, которому присвоен атрибут ID или name, указанный в ссылке.
При использовании якорей HTML важно соблюдать некоторые особенности ⬇️
▪️ При клике на якорной ссылке в адресной строке браузера автоматически к адресу страницы припишется знак # и название якоря, а если воспользоваться кнопкой «назад», то перекинет сначала на эту же страницу, и только после повторного нажатия «назад» на предыдущую.
▪️ Якорь в HTML может быть видимым и невидимым:
— если разместить внутри HTML тега с якорем какой то текст, то он будет видимым;
— если в теге с якорем ничего нет, то он будет невидимым.⠀
А также для удобства пользователя рекомендуем делать плавную прокрутку, иначе резкий переход может сбить с толку. Для этих целей используют специальные скрипты или сторонние плагины.
#methed_про_ит