При создании Landing Page или одностраничника, посадочной страницы, документации или сайта с длинным содержимом, нам необходимо как то передвигаться по сайту, а точнее по его контенту. Для этого придуманы специальные закладки контента, а в веб строительстве такие закладки называются "Якорь" и "Якорная ссылка". При нажатии на такую ссылку, мы переходим в определенную часть страницы. Если это страница текущая, то мы перейдем к участку текста мгновенно.
Для общего развития изучения html, якорь это просто уникальное имя для определенного блока. Обычно в качестве этого имени (якоря) используют id блока или элемента. Вот например даже параграф может быть якорем.
<p id="yakor-saita">Про якорь сайта</p>
Как видите все просто. А вот, чтобы перейти к данному якорю, нам необходимо создать ссылку с адресом страницы и просто дописать к адресу название якоря т.е id и символ решетку. Для выше указанного примера это будет так
www.moy-sait.ru/kak-sozdat-sait#yakor-saita
Якоря используют на многих сайтах где нужна навигация по контенту. Если вы создали длинный текст с разными разделами, то в начале статьи вы можете разместить ссылки на нужные части контента. Так же вы создали лендин и тоже нужно создать ссылки для передвижения по контенту.
А как быть с якорями при создании сайта в конструкторе ? А в конструкторе сайта это еще проще, ведь для этого придуман виджет, который называется "Якорь меню". Это не визуальный виджет для сайта, но для режима редактирования он вполне визуален.
На изображении выше показан виджет, когда мы его расположили на страницу конструктора. У виджета нет настроек, кроме поля для ввода названия якоря.
Многие задаются вопросом, а зачем его использовать когда можно задать определенной колонке или секции id и его использовать? А ответ просто. Представьте страницу из 10 разделов. В каждый блок вы добавили id. Вернулись к сайту через неделю и уже не помните где поменять id блока и необходимо просматривать каждый блок или виджет в отдельности.
А вот с указанным виджетом все просто. Мы просто возвращаемся в конструктор и видим серую область с иконкой якоря и понимаем, что это якорь. Кликаем по нему и сразу при необходимости можем поменять id. Т.е все просто, быстро и визуально. И естественно при просмотре самого сайта мы виджет не увидим и это прекрасно.
Сергей
Просто реально, огромнеейшее Вам спасибо!!!! Столько бился, Вы, вообще молодец!!!
Сергей
Здравсвтуйте, пожалуйста помогите разобраться с проблемой, как сделать так, чтобы меню в мобильной версии сворачивалось при клике по ссылке , а не оставалось открытым, 2 дня уже бьюсь, вот сайт https://ukutuzova.ru/
Админ
День добрый. Если только через JS. В вашем случае как то так
jQuery('.elementor-item-anchor').on('click', function() {jQuery('.elementor-menu-toggle').trigger('click');
});
Сергей
Большое спасибо, буду пробывать
Виталий
Добрый день, если я нахожусь на другой страницы и когда перехожу по якорной ссылки она не переходит, а просто в строке к ссылки добавляется название якоря. Как сделать, чтобы переходила? Якорные ссылки работают только на главном экране-это занятия и мой блог. Добавлял якоря с помощью elementor
Админ
День добрый. Ссылку нужно указывать именно с адресом главной страницы, т.е доменом, тогда будет все хорошо.
Елена
Добрый день!
Я установила на сайт меню WP и в элементор якоря, но при первом нажатии на ссылку в меню или кнопку на странице, перепрыгивает не на то место где якорь стоит. Так может происходить и при повторном нажатии, а вот на третий или четвертый раз перескакивает куда нужно. Как это исправить?
https://meditatsiya-proscheniya.ru/
Админ
День добрый. Как проверить.? Я пощелкал, все нормально.
Воха
Спасибо!
Ілияс
Как подсветить активную якорную ссылку?
Админ
Так же есть ответы в яндексе 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
Ілияс
Как сделать что показывал на каком ЯКОРЬ МЕНЮ находится сейчас
Админ
Вот есть ответ через js https://qna.habr.com/q/251297
Если без JS то нужно поискать другой виджет меню.
Захар
Здравствуйте, что делать если в меню при нажатии на якорь (многостраничный сайт) который есть на этой странице работает, а если нажать на другой то не переходит?
Админ
День добрый. Нужно примеры с сайта. Я так не очень понимаю суть проблемы.
Захар
Вот ссылки на ссылки на видео пример https://drive.google.com/file/d/1v4dSTKl2QIV2Su3W8PnDsf59y8M_4vQq/view?usp=sharing .Преждевременно спасибо за помощь)
Админ
К сожалению я не понял происходящего на видео. 🙁 Пришлите адрес сайта, напишите на какие пункты нажать и где. А вообще у вас тема наверняка платная и должна быть поддержка по данной теме от разработчика.
Владимир
А как быть с плавающем меню? Неужели все делают статическое в 2021 году?
Дело в том, что даже если якорь ставишь выше заголовка, то плавающее меню перекрывает заголовок при переходе по ссылке. А если смещаешь по padding или margin, то образуется пустое не нужное поле внутри контейнера. А если убираешь выше в предыдущий блок, то на разных устройствах выглядит все криво.
Посоветуйте решение!
Админ
Нужны примеры. Не совсем понял суть проблемы. Сам виджет он невидим и не мешает отображению. Виджет Якорь это одно, а плавающее меню это другое.
Татьяна
Забыла поздороваться, ДОБРОГО ВРЕМЕНИ СУТОК!!!
Татьяна
https://онлайн-магазин-24.рф/latoderzhateli/ вот как пример с якорями, при нажатии на кнопку страница прокручивается но останавливается ниже якоря из-за фиксированной шапки
Админ
День добрый. Устанавливайте якорь с учетом высоты шапки.
Едиге
Автор, вы большой молодец! Всем отвечаете! Успехов вам!
Кирилл
Спасибо за информацию. Очень помогла.
Ольга
Я благодарю Вас за Ваш блог. Много полезного нахожу для себя. Уже получилось то, о чем спрашивала Вас сегодня.
Александр
Как?
Админ
Отлично 🙂
ALtair
а можно ли якорь привязать не к меню, а к кнопке ?
Админ
Да, конечно можно. Просто в ссылке кнопки указываете ссылку на якорь.
Ольга
Здравствуйте. Я хочу, чтобы при нажатии кнопки страница плавно прокручивалась вниз, на виджет, без перезагрузки. Когда вставляю в кнопку полную ссылку с доменом, то переход есть на виджет, только с перезагрузкой страницы. Как сделать без нее, подскажите, пожалуйста.
Никита
Добрый день!
Столкнулся с тем, что кнопки меню на которые назначил якорные места отобрадаются только с ПК. Когда захожу с телефона, то кнопок просто нет.
Я новичек и не могу понять, как отобразить на телефоне. Помогите, пожалуйста.
Спасибо заранее!
Админ
День добрый. В данному виджету не относится. Если у вас какая то тема, то нужно смотреть настройки темы по отображению меню. Если виджет меню, то соответствующий виджет.
Виталий
Доброго времени, подскажите как убрать плавный скролл к якорю? Хочу сделать моментальное перемещение к якорю, без прокруток. Для обычных тем без элементор решения есть, а для элементор нашел только файл perfect-scrollbar.js думаю может в нем нужно по-изменять значения? Или есть иные способы? Cпасибо.
Админ
День добрый. Универсального решения задачи нет.
Валентин
Интересно а как сделать что бы в мобильной версии после клика по якорной ссылке закрывалось бургер меню.
Админ
Написать js скрипт который это будет делать.
Stanislav Junior :)
Подскажите каким образом лучше сделать навигацию одностраничного сайта? Через обычные якоря HTML5/CSS3 или через JS jQuery? Насколько я понимаю разница лишь в том что в JS можно поставить анимацию плавного перехода?
Админ
Через виджет Якорь меню лучше всего.
Артур
Здравствуйте. После нажатия на ссылку якорь оказывается снизу страницы, а не сверху, в чем может быть проблема, подскажите?
Админ
Здравствуйте. Проблема в неправильном якоре. Скорей всего вы задали якорю id который есть у вас на сайте.
Инна
У меня вопрос по поводу действия после нажатия кнопки. К кнопке я прикрепляю ID блока на этой же странице (это лендинг). После нажатия перемещение происходит не сразу, а через какое-то время, причем, т.е. какая-то задержка происходит (или медленное-медленное очень медленное движение) а потом все идет нормально, перебрасывает на нужный блок. Можно ли эту задержку как-то убрать?
Админ
По умолчанию нет никаких задержек. Это простое действие, с самы простым js скриптом. Необходимо смотреть на сайт, возможно задержка происходит по каким то процессам (ошибкам) на сайте.
Алина
Добрый вечер. Подскажите как называется область на странице вверху где пишется путь страниц, например Главная-первая страница- третья страница; что бы перейти на главную не надо нажимать два раза назад, а просто на Главную страницу жмеш и переходиш? Когда отображается весь путь.
Админ
День добрый. Называется Хлебные крошки или Breadcrumbs
Marik
А если нужно, чтобы при нажатии на кнопку Позвонить совершался звонок? Все работает только если прописать якорную ссылку в виджете «кнопка» в графе текст (вкладка содержание). Но тогда смещается сама кнопка. То есть Слово Позвонить работает, но находится за пределом кнопки, которая остается пустой рядышком. Как это исправить?
Админ
А зачем прописывать якорную ссылку в виджете кнопка? У кнопки есь поле для ввода обычной ссылке втч и в формате tel для звонков. И не понятно, причем тут виджет «Якорь меню» и ваша кнопка?
Marik
спасибо! Разобралась )
Ольга
Доброго дня)
Такой вопрос: сайт состоит из трех страниц, одна из них — с якорными ссылками. При переходе по ссылке меню на якорь цвет ссылки на активной странице становится активным и перестает реагировать на наведение, т.е. нормальные кнопки белые и меняют цвет на оранжевый при наведении, а вот эти постоянно оранжевые.
Админ
Здравствуйте. От данного виджета это не зависит. Такое поведение закладывается в стилях сайта. А именно в вашем случаи в jet-menu. И именно у них (у разарботчика плагина) необходимо запросить поддержки. Но вообще, у вас же ссылка с якорем это почти ссылка на основную страницу т.е она является текущей и поэтому подсвечивается в активном состоянии.
Как решение, вам нужно придумать стили, например такие
.jet-menu-title:hover { color: #E2781C;}.jet-menu-title { color: #fff;}
.
Егор
Забыл добавить, навигация сделана через меню вордпресса, а не просто html-кодом
Егор
Здравствуйте. Подскажите пожалуйста, почему елементор не отображает в адресной строке сам якорь и как сделать чтоб отображал? То есть, при при нажатии на якорь в обычном html коде в адресной строке отображается site.com/#link, а при создании на елементоре его нет, только домен. Спасибо
Админ
Здравствуйте. Дело в том, что для плавной навигации при нажатии на якорь используется js код , которые не меняет ничего в адресной строке, так как это никому не нужно.
Егор
Увы, но нужно.. Дело в том, что заказчику не нравится что при нажатии в браузере кнопки «назад» (и на телефоне тоже) человек уходит с сайта. То что тут проблема в js я понял методом тыка. Нашел функцию в frontend.min.js (поиск по a[href*=»#»]) при удалении которой все отображается в адресной строке, но при этом перестали работать табы и слайдеры. Ладно, буд разбираться дальше.. Спасибо за ответ
Гульнар
То есть закладка — напоминала, я правильно поняла?
Админ
Да, виджет как бы закладка. Если сделать без его, то работать будет, но при большой странице типа лендинг, вам будет сложно запомнить где нужный id. А так все просто, посмотрели на виджет и узнали.