При создании Landing Page или одностраничника, посадочной страницы, документации или сайта с длинным содержимом, нам необходимо как то передвигаться по сайту, а точнее по его контенту. Для этого придуманы специальные закладки контента, а в веб строительстве такие закладки называются "Якорь" и "Якорная ссылка". При нажатии на такую ссылку, мы переходим в определенную часть страницы. Если это страница текущая, то мы перейдем к участку текста мгновенно.
Для общего развития изучения html, якорь это просто уникальное имя для определенного блока. Обычно в качестве этого имени (якоря) используют id блока или элемента. Вот например даже параграф может быть якорем.
<p id="yakor-saita">Про якорь сайта</p>
Как видите все просто. А вот, чтобы перейти к данному якорю, нам необходимо создать ссылку с адресом страницы и просто дописать к адресу название якоря т.е id и символ решетку. Для выше указанного примера это будет так
www.moy-sait.ru/kak-sozdat-sait#yakor-saita
Якоря используют на многих сайтах где нужна навигация по контенту. Если вы создали длинный текст с разными разделами, то в начале статьи вы можете разместить ссылки на нужные части контента. Так же вы создали лендин и тоже нужно создать ссылки для передвижения по контенту.
А как быть с якорями при создании сайта в конструкторе ? А в конструкторе сайта это еще проще, ведь для этого придуман виджет, который называется "Якорь меню". Это не визуальный виджет для сайта, но для режима редактирования он вполне визуален.
На изображении выше показан виджет, когда мы его расположили на страницу конструктора. У виджета нет настроек, кроме поля для ввода названия якоря.
Многие задаются вопросом, а зачем его использовать когда можно задать определенной колонке или секции id и его использовать? А ответ просто. Представьте страницу из 10 разделов. В каждый блок вы добавили id. Вернулись к сайту через неделю и уже не помните где поменять id блока и необходимо просматривать каждый блок или виджет в отдельности.
А вот с указанным виджетом все просто. Мы просто возвращаемся в конструктор и видим серую область с иконкой якоря и понимаем, что это якорь. Кликаем по нему и сразу при необходимости можем поменять id. Т.е все просто, быстро и визуально. И естественно при просмотре самого сайта мы виджет не увидим и это прекрасно.
Якорь меню — виджет Elementor: 44 комментария
То есть закладка — напоминала, я правильно поняла?
Да, виджет как бы закладка. Если сделать без его, то работать будет, но при большой странице типа лендинг, вам будет сложно запомнить где нужный id. А так все просто, посмотрели на виджет и узнали.
Здравствуйте. Подскажите пожалуйста, почему елементор не отображает в адресной строке сам якорь и как сделать чтоб отображал? То есть, при при нажатии на якорь в обычном html коде в адресной строке отображается site.com/#link, а при создании на елементоре его нет, только домен. Спасибо
Здравствуйте. Дело в том, что для плавной навигации при нажатии на якорь используется js код , которые не меняет ничего в адресной строке, так как это никому не нужно.
Увы, но нужно.. Дело в том, что заказчику не нравится что при нажатии в браузере кнопки «назад» (и на телефоне тоже) человек уходит с сайта. То что тут проблема в js я понял методом тыка. Нашел функцию в frontend.min.js (поиск по a[href*=»#»]) при удалении которой все отображается в адресной строке, но при этом перестали работать табы и слайдеры. Ладно, буд разбираться дальше.. Спасибо за ответ
Забыл добавить, навигация сделана через меню вордпресса, а не просто html-кодом
Доброго дня)
Такой вопрос: сайт состоит из трех страниц, одна из них — с якорными ссылками. При переходе по ссылке меню на якорь цвет ссылки на активной странице становится активным и перестает реагировать на наведение, т.е. нормальные кнопки белые и меняют цвет на оранжевый при наведении, а вот эти постоянно оранжевые.
Здравствуйте. От данного виджета это не зависит. Такое поведение закладывается в стилях сайта. А именно в вашем случаи в jet-menu. И именно у них (у разарботчика плагина) необходимо запросить поддержки. Но вообще, у вас же ссылка с якорем это почти ссылка на основную страницу т.е она является текущей и поэтому подсвечивается в активном состоянии.
Как решение, вам нужно придумать стили, например такие
.jet-menu-title:hover { color: #E2781C;}.jet-menu-title { color: #fff;}
.
А если нужно, чтобы при нажатии на кнопку Позвонить совершался звонок? Все работает только если прописать якорную ссылку в виджете «кнопка» в графе текст (вкладка содержание). Но тогда смещается сама кнопка. То есть Слово Позвонить работает, но находится за пределом кнопки, которая остается пустой рядышком. Как это исправить?
А зачем прописывать якорную ссылку в виджете кнопка? У кнопки есь поле для ввода обычной ссылке втч и в формате tel для звонков. И не понятно, причем тут виджет «Якорь меню» и ваша кнопка?
спасибо! Разобралась )
Добрый вечер. Подскажите как называется область на странице вверху где пишется путь страниц, например Главная-первая страница- третья страница; что бы перейти на главную не надо нажимать два раза назад, а просто на Главную страницу жмеш и переходиш? Когда отображается весь путь.
День добрый. Называется Хлебные крошки или Breadcrumbs
У меня вопрос по поводу действия после нажатия кнопки. К кнопке я прикрепляю ID блока на этой же странице (это лендинг). После нажатия перемещение происходит не сразу, а через какое-то время, причем, т.е. какая-то задержка происходит (или медленное-медленное очень медленное движение) а потом все идет нормально, перебрасывает на нужный блок. Можно ли эту задержку как-то убрать?
По умолчанию нет никаких задержек. Это простое действие, с самы простым js скриптом. Необходимо смотреть на сайт, возможно задержка происходит по каким то процессам (ошибкам) на сайте.
Здравствуйте. После нажатия на ссылку якорь оказывается снизу страницы, а не сверху, в чем может быть проблема, подскажите?
Здравствуйте. Проблема в неправильном якоре. Скорей всего вы задали якорю id который есть у вас на сайте.
Подскажите каким образом лучше сделать навигацию одностраничного сайта? Через обычные якоря HTML5/CSS3 или через JS jQuery? Насколько я понимаю разница лишь в том что в JS можно поставить анимацию плавного перехода?
Через виджет Якорь меню лучше всего.
Интересно а как сделать что бы в мобильной версии после клика по якорной ссылке закрывалось бургер меню.
Написать js скрипт который это будет делать.
Доброго времени, подскажите как убрать плавный скролл к якорю? Хочу сделать моментальное перемещение к якорю, без прокруток. Для обычных тем без элементор решения есть, а для элементор нашел только файл perfect-scrollbar.js думаю может в нем нужно по-изменять значения? Или есть иные способы? Cпасибо.
День добрый. Универсального решения задачи нет.
Добрый день!
Столкнулся с тем, что кнопки меню на которые назначил якорные места отобрадаются только с ПК. Когда захожу с телефона, то кнопок просто нет.
Я новичек и не могу понять, как отобразить на телефоне. Помогите, пожалуйста.
Спасибо заранее!
День добрый. В данному виджету не относится. Если у вас какая то тема, то нужно смотреть настройки темы по отображению меню. Если виджет меню, то соответствующий виджет.
а можно ли якорь привязать не к меню, а к кнопке ?
Да, конечно можно. Просто в ссылке кнопки указываете ссылку на якорь.
Здравствуйте. Я хочу, чтобы при нажатии кнопки страница плавно прокручивалась вниз, на виджет, без перезагрузки. Когда вставляю в кнопку полную ссылку с доменом, то переход есть на виджет, только с перезагрузкой страницы. Как сделать без нее, подскажите, пожалуйста.
Я благодарю Вас за Ваш блог. Много полезного нахожу для себя. Уже получилось то, о чем спрашивала Вас сегодня.
Отлично 🙂
Как?
Спасибо за информацию. Очень помогла.
Автор, вы большой молодец! Всем отвечаете! Успехов вам!
А как быть с плавающем меню? Неужели все делают статическое в 2021 году?
Дело в том, что даже если якорь ставишь выше заголовка, то плавающее меню перекрывает заголовок при переходе по ссылке. А если смещаешь по padding или margin, то образуется пустое не нужное поле внутри контейнера. А если убираешь выше в предыдущий блок, то на разных устройствах выглядит все криво.
Посоветуйте решение!
Нужны примеры. Не совсем понял суть проблемы. Сам виджет он невидим и не мешает отображению. Виджет Якорь это одно, а плавающее меню это другое.
Здравствуйте, что делать если в меню при нажатии на якорь (многостраничный сайт) который есть на этой странице работает, а если нажать на другой то не переходит?
День добрый. Нужно примеры с сайта. Я так не очень понимаю суть проблемы.
Вот ссылки на ссылки на видео пример https://drive.google.com/file/d/1v4dSTKl2QIV2Su3W8PnDsf59y8M_4vQq/view?usp=sharing .Преждевременно спасибо за помощь)
К сожалению я не понял происходящего на видео. 🙁 Пришлите адрес сайта, напишите на какие пункты нажать и где. А вообще у вас тема наверняка платная и должна быть поддержка по данной теме от разработчика.
Как сделать что показывал на каком ЯКОРЬ МЕНЮ находится сейчас
Вот есть ответ через js https://qna.habr.com/q/251297
Если без JS то нужно поискать другой виджет меню.
Как подсветить активную якорную ссылку?
Так же есть ответы в яндексе https://yandex.ru/search/?clid=2186621&text=js%20%D0%BF%D0%BE%D0%B4%D1%81%D0%B2%D0%B5%D1%82%D0%BA%D0%B0%20%D1%8F%D0%BA%D0%BE%D1%80%D1%8F%20%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8&lr=11057&redircnt=1624179623.1
Спасибо!