Кнопка «Назад» – функциональный элемент, который улучшает навигацию на одностраничных лендингах и многостраничных сайтах, созданных в Tilda. По умолчанию конструктор не предоставляет встроенного решения для этой задачи, но реализовать её можно несколькими способами без глубоких знаний кода. В этой статье разберём три рабочих метода: через Zero Block, с помощью HTML-кода и через JavaScript.
Первый способ подходит для пользователей, которые избегают работы с кодом. В Zero Block можно добавить кнопку из стандартных элементов, а затем привязать к ней действие «Вернуться на предыдущую страницу» через настройки триггера. Для этого выберите кнопку, перейдите в раздел «Действия» и укажите тип «Назад». Метод работает корректно в 90% случаев, но не поддерживает кастомизацию анимации или задержки.
Если требуется гибкость в настройке, используйте HTML-код. Вставьте в блок T123 (HTML-код) следующий фрагмент:
<button onclick="history.back()" style="padding: 10px 20px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Назад</button>
Этот вариант позволяет менять стили кнопки напрямую в коде: цвет, размер, шрифт и отступы. Учтите, что метод history.back() возвращает пользователя на предыдущую страницу в истории браузера, а не на фиксированный URL. Для перехода на конкретную страницу замените history.back() на window.location.href = ‘ваш_URL’.
Для продвинутых сценариев подойдёт JavaScript. Добавьте в блок T123 скрипт, который отслеживает клик и выполняет нужное действие:
<script>
document.addEventListener('DOMContentLoaded', function() {
const backButton = document.getElementById('back-btn');
backButton.addEventListener('click', function() {
history.back();
// Или для перехода на конкретную страницу:
// window.location.href = '/previous-page';
});
});
</script>
Этот подход даёт возможность добавить дополнительную логику: например, отправку события в Google Analytics или показ модального окна перед возвратом. Не забудьте привязать скрипт к кнопке с уникальным ID.
Какие блоки Тильды поддерживают встроенную кнопку «Назад»
В Тильде кнопка «Назад» интегрирована в несколько специализированных блоков, предназначенных для навигации и управления пользовательским потоком. Основные из них:
- T123 (Header с кнопками) – позволяет добавить кнопку «Назад» в шапку сайта, что удобно для многостраничных проектов или лендингов с разветвлённой структурой. Настройка доступна в разделе «Кнопки» при редактировании блока: выберите тип «Назад» и укажите целевой URL или оставьте поле пустым для возврата на предыдущую страницу в истории браузера.
- T178 (Форма с кнопкой) – поддерживает кнопку «Назад» в качестве действия после отправки формы. Это полезно для страниц с лид-магнитами, где после заполнения анкеты пользователю предлагается вернуться к основному контенту. Настройка выполняется в параметрах формы: выберите «Действие после отправки» → «Кнопка» → «Назад».
- T228 (Меню с иконками) – в мобильной версии блока можно заменить стандартную кнопку «Закрыть» на «Назад», что улучшает UX на устройствах с сенсорным управлением. Для этого в настройках блока активируйте опцию «Использовать кнопку ‘Назад’ вместо ‘Закрыть'».
Блоки T126 (Hero-блок с кнопкой) и T143 (Баннер с кнопкой) также поддерживают кнопку «Назад», но её использование здесь оправдано только в специфических сценариях – например, если блок служит точкой входа в воронку продаж, а кнопка возвращает пользователя к предыдущему шагу. В остальных случаях лучше ограничиться стандартными кнопками «Подробнее» или «Купить», чтобы не путать посетителей.
Важно: кнопка «Назад» в Тильде работает через JavaScript и не требует ручного указания URL, если цель – возврат на предыдущую страницу в истории браузера. Однако при тестировании проверяйте её поведение в разных браузерах: в Safari и некоторых мобильных браузерах возможны задержки или некорректное срабатывание из-за особенностей кеширования. Для критически важных сценариев (например, оплата) дублируйте кнопку ссылкой с явным указанием адреса.
Как настроить кнопку «Назад» через стандартные настройки блока
В Тильде кнопку «Назад» можно добавить через блок T123 («Кнопка») или T128 («Кнопка с иконкой»). В настройках блока найдите поле Действие при клике и выберите «Вернуться на предыдущую страницу». Этот метод работает без JavaScript и не требует ручной настройки ссылок – браузер автоматически определяет историю переходов.
Для кастомизации текста кнопки используйте поле Текст на кнопке в настройках блока. Если нужно изменить стиль, перейдите во вкладку «Оформление» и настройте шрифт, цвет фона, отступы и радиус скругления. Учтите, что кнопка «Назад» не будет работать на первой странице сайта или при прямом переходе по ссылке – в таких случаях она просто не сработает.
Если требуется, чтобы кнопка вела на конкретную страницу (например, на главную), вместо действия «Вернуться на предыдущую страницу» выберите «Перейти по ссылке» и укажите URL. Этот вариант полезен для страниц с динамическим контентом, где стандартная история браузера может вести не туда, куда ожидает пользователь.
Добавление кнопки с помощью HTML-кода в Zero Block
Zero Block в Тильде позволяет вставлять произвольный HTML-код, что открывает возможности для создания кастомных элементов, включая кнопку «Назад». Для этого перейдите в редактор страницы, добавьте Zero Block и выберите инструмент «HTML-код» из панели инструментов.
Вставьте следующий код в поле редактора:
<button onclick="history.back()" style="padding: 10px 20px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Назад</button>
Этот код создаёт кнопку с базовыми стилями: чёрный фон, белый текст, скруглённые углы и отступы. Метод history.back() возвращает пользователя на предыдущую страницу в истории браузера, аналогично нажатию кнопки «Назад» в браузере.
Если нужно, чтобы кнопка вела на конкретную страницу, замените history.back() на window.location.href=’URL’, где URL – адрес целевой страницы. Например: window.location.href='/main' перенаправит на страницу с адресом /main.
Для адаптивности добавьте медиазапросы в стили кнопки. В Zero Block это можно сделать через атрибут style или подключив внешний CSS-файл, если проект поддерживает кастомные стили. Пример адаптивной кнопки:
<button onclick="history.back()" style="padding: 8px 16px; background: #000; color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;">Назад</button>
Здесь уменьшены отступы и размер шрифта для мобильных устройств.
Чтобы кнопка гармонировала с дизайном сайта, используйте переменные Тильды для цветов. Например, var(—t-color-primary) подтянет основной цвет проекта. Полный список переменных доступен в документации Тильды в разделе «CSS-переменные».
Проверьте работу кнопки в разных браузерах: history.back() может вести себя некорректно в Safari на iOS, если страница была открыта через редирект. В таких случаях используйте history.go(-1) – это более надёжный аналог.
Для продвинутых сценариев добавьте анимацию наведения. Вставьте в атрибут style правило transition: background 0.3s; и псевдокласс :hover с изменением фона. Пример:
<button onclick="history.back()" style="padding: 10px 20px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s;" onmouseover="this.style.background='#333'" onmouseout="this.style.background='#000'">Назад</button>
Использование JavaScript для реализации функции возврата на предыдущую страницу
В Тильде кнопка «Назад» реализуется через метод history.back() JavaScript. Этот метод вызывает переход на предыдущую страницу в истории браузера, аналогично нажатию кнопки «Назад» в браузере. Для добавления такой кнопки создайте HTML-блок и вставьте в него код:
<button onclick="history.back()">Назад</button>
Метод работает только в пределах текущей сессии браузера. Если пользователь перешел на сайт по прямой ссылке, кнопка не сработает, так как истории переходов нет. Для таких случаев добавьте проверку:
<button onclick="if (window.history.length > 1) { history.back() } else { window.location.href = '/default-page' }">Назад</button>
Если требуется возврат на конкретную страницу, используйте window.location.href. Например, для перехода на главную страницу:
<button onclick="window.location.href = '/'">На главную</button>
Для динамического изменения поведения кнопки в зависимости от источника перехода используйте document.referrer. Этот метод возвращает URL предыдущей страницы. Пример:
if (document.referrer.includes('tilda.cc')) { history.back() } else { window.location.href = '/catalog' }
Чтобы кнопка выглядела как стандартный элемент Тильды, добавьте классы из библиотеки Tilda. Например, t-btn и t-btn_primary. Полный код:
<button class="t-btn t-btn_primary" onclick="history.back()">Вернуться назад</button>
Для отладки поведения кнопки используйте консоль браузера. В Chrome откройте DevTools (F12), перейдите на вкладку «Console» и протестируйте методы history.back() или window.location.href вручную. Это поможет выявить ошибки в логике переходов.
Как связать кнопку «Назад» с конкретной страницей сайта
В Тильде кнопка «Назад» по умолчанию возвращает пользователя на предыдущую страницу в истории браузера. Чтобы перенаправить её на конкретный URL, используйте JavaScript в блоке «HTML-код» (T123). Добавьте следующий скрипт в настройки кнопки:
- Откройте редактор кнопки и выберите «Добавить действие» → «JavaScript».
- Вставьте код:
window.location.href = 'https://ваш-сайт.ru/целевая-страница';. - Замените URL на нужный адрес, например,
/catalogдля относительного пути.
Для динамических страниц (например, карточек товаров) используйте переменные Тильды. Вставьте в код {{page-url}} или {{product-parent-url}}, если требуется вернуться к родительской категории. Проверьте работу кнопки в режиме предпросмотра – она должна игнорировать историю браузера и всегда вести на заданный адрес.
Если кнопка находится в Zero Block, добавьте атрибут onclick напрямую в HTML-кнопку: <button onclick="window.location.href='/contacts'">Назад</button>. Для сложных сценариев (например, возврат с формы заказа) используйте history.replaceState перед перенаправлением, чтобы исключить циклические переходы: history.replaceState(null, '', '/cart'); window.location.href = '/checkout';. Тестируйте на мобильных устройствах – некоторые браузеры кэшируют страницы агрессивно, и стандартный history.back() может работать некорректно.
Настройка стиля кнопки через CSS в Тильде
В Тильде стиль кнопки «Назад» настраивается через блок с HTML-кодом или виджет Zero Block. Добавьте класс, например, .t-back-button, и пропишите CSS в разделе «Дополнительные настройки» → «Свой CSS». Для базовой кастомизации используйте свойства: background-color: #2a2a2a; (темный фон), color: #ffffff; (белый текст), padding: 12px 24px; (отступы), border-radius: 4px; (скругление углов) и font-size: 16px;. Чтобы кнопка адаптировалась под мобильные устройства, добавьте @media (max-width: 768px) { .t-back-button { padding: 10px 18px; font-size: 14px; } }.
Для интерактивности используйте псевдоклассы: .t-back-button:hover { background-color: #1a1a1a; } (эффект при наведении) и .t-back-button:active { transform: scale(0.98); } (визуальная обратная связь при клике). Если кнопка должна быть фиксированной на экране, добавьте position: fixed; bottom: 20px; left: 20px; и z-index: 1000;, чтобы она не перекрывалась другими элементами. Проверяйте отображение в разных браузерах – Safari может игнорировать transform без префикса -webkit-.
Проверка работы кнопки в разных браузерах и на мобильных устройствах
На мобильных устройствах добавьте тест на жесты: в iOS Safari кнопка «Назад» в браузере может конфликтовать с кастомной реализацией. Откройте сайт на iPhone, перейдите на вторую страницу, затем нажмите кнопку «Назад» – если вместо возврата происходит обновление страницы, замените history.back() на history.go(-1) или добавьте обработчик события popstate.
В Edge на Windows 10/11 проверьте работу кнопки при использовании режима «IE Mode». Если сайт открыт в этом режиме, JavaScript-методы работы с историей могут вести себя нестабильно. Используйте условный код: if (window.navigator.userAgent.indexOf("Trident") > -1) { window.location.href = document.referrer; } для принудительного перенаправления по рефереру.
На Android-устройствах протестируйте кнопку в Chrome, Firefox и Samsung Internet. В последнем иногда возникают проблемы с кешированием страниц: кнопка «Назад» может возвращать пользователя на две страницы назад вместо одной. Решение – добавить проверку на длину истории: if (history.length > 2) { history.back(); } else { window.location.href = "/"; }.
Проверьте поведение кнопки при открытии сайта через социальные сети (например, Facebook или Telegram). В мобильных браузерах этих приложений история навигации может быть обнулена, и history.back() вернёт пользователя на главную страницу соцсети. В таких случаях используйте явное указание URL: window.location.href = "https://вашсайт.ru/предыдущая-страница";.
В Yandex Browser на Android и iOS обратите внимание на работу кнопки при включённом «Турбо-режиме». Из-за сжатия трафика и кеширования страниц на стороне Яндекса метод history.back() может не срабатывать. Добавьте fallback на серверный редирект через window.location.replace() с указанием полного пути.
Для десктопных браузеров протестируйте кнопку при открытии сайта в приватном режиме. В Firefox и Safari в этом режиме история навигации может не сохраняться, и кнопка «Назад» будет вести на пустую страницу. Решение – добавить проверку на наличие предыдущей страницы: if (document.referrer) { history.back(); } else { window.location.href = "/"; }.
Используйте инструменты разработчика для эмуляции мобильных устройств: в Chrome DevTools выберите устройство (например, iPhone 12 или Galaxy S21) и проверьте, как кнопка реагирует на касания. Обратите внимание на задержку срабатывания – если она превышает 300 мс, добавьте touch-action: manipulation; в CSS для ускорения отклика.
Решение проблем, если кнопка «Назад» не работает после публикации
После публикации сайта на Тильде кнопка «Назад» может перестать функционировать из-за конфликтов с JavaScript или некорректной настройки переходов между страницами. Первым шагом проверьте, не блокирует ли пользовательский скрипт стандартное поведение браузера. Откройте консоль разработчика (F12 → вкладка «Console») и ищите ошибки типа Uncaught TypeError или preventDefault().
Если кнопка реализована через HTML-элемент с атрибутом onclick="history.back()", убедитесь, что она не перекрыта другим обработчиком событий. В Тильде часто используются собственные скрипты для анимаций переходов – они могут отменять стандартное поведение. Добавьте в код кнопки return false; после вызова history.back(), чтобы предотвратить всплытие события.
Проблема может возникать из-за кеширования страниц браузером. Очистите кеш (Ctrl+Shift+Del) или протестируйте сайт в режиме инкогнито. Если кнопка заработала, добавьте в секцию <head> мета-тег для отключения кеширования: <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">.
Проверьте настройки переходов между страницами в Тильде. Если в проекте включена опция «Плавные переходы» (раздел «Настройки сайта» → «Анимации»), она может конфликтовать с кнопкой «Назад». Отключите анимации временно и протестируйте кнопку. Если проблема исчезла, замените плавные переходы на стандартные или используйте кастомный скрипт для управления историей браузера.
В некоторых случаях кнопка не работает из-за особенностей работы с якорными ссылками (#section). Если страница содержит якоря, браузер может игнорировать history.back(), считая переход внутренним. Решение – использовать history.go(-1) вместо history.back() или добавить проверку на наличие якоря в URL перед вызовом функции.
| Причина | Решение | Инструмент проверки |
|---|---|---|
| Конфликт скриптов | Отключите сторонние скрипты поочередно | Консоль браузера (F12) |
| Кеширование страниц | Добавьте мета-тег Cache-Control | Режим инкогнито |
| Плавные переходы Тильды | Отключите анимации в настройках | Настройки сайта → Анимации |
| Якорные ссылки | Используйте history.go(-1) |
Проверка URL на наличие # |
Если ни один из методов не сработал, реализуйте кнопку через кастомный скрипт с использованием window.onpopstate. Пример кода для вставки в блок «HTML-код» Тильды:
<script>
document.addEventListener('DOMContentLoaded', function() {
const backButton = document.querySelector('.your-back-button-class');
if (backButton) {
backButton.addEventListener('click', function(e) {
e.preventDefault();
window.history.go(-1);
});
}
});
</script>Для сложных случаев, когда кнопка должна работать даже после перезагрузки страницы, сохраняйте состояние истории в localStorage и восстанавливайте его при загрузке. Это требует дополнительной логики, но гарантирует корректную работу в обход ограничений браузера.
Загрузка...
