Каждый кто решил будет круто использовать виджет Off-Canvas Elementor в качестве мобильного меню или полноэкранного меню в десктопной версии (и такое случается). Да использовать вне холста лучше для SEO, в отличие от Popup навигация доступна для индексирования. Наталкивался на проблему якорных ссылок, при переходе на которые холст остается на месте. Раньше я пользовался костылями, которые дергали кнопку закрытия, что иногда приводило к конфликтам, или работало не так я хотел. Так вот совместно с цифровыми помощниками написал вот такой универсальный код, который работает даже если ан странице несколько Off-Canvas.
Проблема
Когда в Elementor используется Off-Canvas (всплывающая боковая панель, часто применяемая для меню), клики по якорным ссылкам (#section) часто ведут себя некорректно:
- страница не прокручивается к нужному блоку;
- окно Off-Canvas остаётся открытым, перекрывая контент;
- плавный скролл не работает, или срабатывает до того, как панель закроется.
Эта проблема особенно заметна на мобильных устройствах, где UX сильно зависит от плавности перехода.
Решение: скрипт для корректной работы якорей
Ниже приведён код, который устраняет эти проблемы и делает работу Off-Canvas более «умной» и удобной:
Как использовать
Вставьте код в виджет «HTML» на странице, где используется Off-Canvas (первым блоком в контейнере, в подвал сайта или с помощью плагина сниппетов кода).
→ В Elementor: HTML → Вставить код → Обновить страницу.
Как это работает
jQuery находит все Off-Canvas элементы Elementor (.e-off-canvas…).
Для каждого:
Отслеживаются клики по ссылкам.
- Если ссылка ведёт к якорю на текущей странице — окно Off-Canvas плавно закрывается.
- После закрытия (через setTimeout) страница прокручивается к нужному элементу (scrollIntoView с behavior: ’smooth’).
Для новых Off-Canvas, созданных динамически (например, через AJAX или Elementor Popups), работает MutationObserver — автоматическая инициализация без перезагрузки страницы.
Улучшение UX
Можно добавить лёгкую анимацию иконки «крестика» при закрытии меню:
.eicon-close {
transition: transform 0.3s ease;
}
.eicon-close:hover {
transform: rotate(90deg);
}
Если используется SVG-иконка, можно применить тот же эффект к контейнеру SVG:
.off-canvas-close svg {
transition: transform 0.3s ease;
}
.off-canvas-close svg:hover {
transform: rotate(90deg);
}Это мой стандартный метод, я заменил все старые костыли и использую его на всех сайтах. Проблеме уже пару лет, вряд ли Elementor починит это в ближайшее время, так что актуально.
