Как сделать якорь на другую страницу

Опубликовано 21 Март, 2021 | Функции | 2 251 просмотров

Если блок на этой же странице

1. Создайте блок "Ссылка"

2. В списке действий выберите "Якорь"

3. Выберите блок до которого скролить

 

4. Когда человек кликнет по добавленной кнопке, он перейдет к блоку, на который вы указали.

 

Если блок на другой странице

Узнайте id блока к которому надо прокрутить страницу.

Перейдите к блокам страницы и наведите мышью на иконку блока.

Вы увидите всплывающее окно с id блока: 1452.

 

Сформируйте ссылку на этот блок.

Скопируйте url страницы с блоком и добавьте к нему #block_1452.

Например, url страницы где находится блок https://linkrr.ru/pvolkov.

Добавьте к этому адресу #block_1452 - где 1452 это id блока.

Итоговая ссылка будет https://linkrr.ru/pvolkov#block_1452

 

Используйте ссылку.

Вы можете открыть ее в браузере и оказаться сразу на нужном блоке.

Или вы можете добавить эту ссылку в другой блок "Ссылка" и когда человек кликнет на этот блок, он попадет на нужное место в странице.

 

Пример https://linkrr.ru/anchor-test

 

 

Если страница перезагружается в Mi Browser или вам не нравится как работает Якорь.

Добавьте HTML блок с кодом:

<script>
    $(document).ready(function () {
        var src = $("#block_254203"); // Исходная ссылка (блок по которому надо кликнуть, чтобы произошел переход)
        var dst = $("#block_254207"); // Целевой блок

        src.on("click", function (event) {
            event.preventDefault(); // Предотвращаем переход по ссылке

            var offsetTop = dst.offset().top;

            // Плавный скролл к элементу
            $("html, body").animate({ scrollTop: offsetTop }, 1000);
        });
    });
</script>

 

Замените id блоков в src и dst на ваши.

Последняя правка от 6 Август, 2023