Евгений Галиев

Кнопка будет возвращать пользователя на предыдущую страницу, если переход был произведён внутри сайта, или перемещать к определённому блоку на главной странице, если предыдущая страница была внешней.

В качестве примера: на главной странице у меня расположено портфолио проектов, я нажимаю на один из проектов и оказываю на странице проекта. Кнопка «Назад» расположена на странице проекта и возвращает на предыдущую страницу в то же место, откуда был произведен переход или к блоку с портфолио, если я оказался на странице проекта сразу, а не перешел с главной страницы.

1. Добавьте якорь на главную страницу

1. Откройте главную страницу, где расположено портфолио.
2. Добавьте блок T172 («Якорь») над секцией портфолио.
3. В настройках блока задайте имя якоря: folio.

2. Создайте кнопку «Назад» на странице проекта

1. Перейдите на страницу проекта.
2. Добавьте блок PR102 («Логотипы в колонках, разделенные линиями»). Этот блок нужен для загрузки иконки.
3. Загрузите SVG-иконку стрелки назад.
   • Вы можете найти подходящую стрелку или создать её самостоятельно.
   • После загрузки скопируйте ссылку на изображение. Она будет выглядеть примерно так:
     https://static.tildacdn.com/tild6665-3737-4135-b031-383632386634/back.svg.
4. После копирования ссылки скройте блок.

3. Добавьте HTML-код для кнопки «Назад»

1. На странице проекта добавьте блок T123 (HTML-код).
2. Вставьте в него следующий код:

<div class="ez-back-button"></div>

<style>
.ez-back-button {
    display: block;
    width: 44px;
    height: 44px;
    background-color: #fff;
    background-image: url("https://static.tildacdn.com/tild6665-3737-4135-b031-383632386634/back.svg"); /* Замените на вашу ссылку */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 42px;
    position: fixed;
    border-radius: 999px;
    padding: 1px;
    z-index: 1000;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}
.ez-back-button:hover {
    background-color: #e0e0e0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const backButton = document.querySelector('.ez-back-button');

    if (backButton) {
        backButton.addEventListener('click', function () {
            // Проверяем, была ли предыдущая страница на том же домене
            if (document.referrer && new URL(document.referrer).hostname === window.location.hostname) {
                // Переход на предыдущую страницу
                window.history.back();
            } else {
                // Переход на /#folio
                window.location.href = '/#folio';
            }
        });
    }
});
</script>

Ссылка в background-image должна указывать на изображение вашей иконки.

4. Публикация и тестирование

Опубликуйте главную страницу и страницу проекта и проверьте функциональность:

• Нажмите на проект в портфолио. На странице проекта нажмите кнопку «Назад».
• Если предыдущая страница была на вашем сайте, кнопка вернёт вас на неё.
• Если предыдущая страница была на другом сайте, кнопка переместит вас к якорю #folio на главной странице.