Закладка якорной ссылки для загрузки другой страницы перед завершением?

Содержание

Вопрос или проблема
Ответ или решение
Подход к решению проблемы:
Пример кода:
Заключение:

Вопрос или проблема

Вопрос: есть ли способ, чтобы ссылка на якорную закладку сначала загружала другую страницу, а затем направлялась к своему месту назначения?

Я разрабатываю веб-сайт с вертикальной прокруткой, где главная страница отображает содержимое 3 других страниц в секциях или div’ах. Каждая секция имеет закладку и ссылку «вверх», а в моем основном навигационном меню используются пользовательские якорные ссылки. Я также использую плагин плавной прокрутки jQuery, который работает очень хорошо.

Проблема, которую я хотел бы решить, заключается в том, что если вы находитесь не на главной странице, а на другой странице (например, на странице блога), и нажимаете на ссылку закладки, то эффект плавной прокрутки не может сработать. Просто происходит резкий переход к нужному месту.

Будет ли возможно сделать так, чтобы ссылки закладок сначала загружали главную страницу, а затем продолжали к необходимой закладке, чтобы прокрутка все же сработала??

Я не совсем понимаю, что вы пытаетесь сделать, но предполагаю, что ваши «закладки» — это именованные якоря на самой странице? И что включение этих имен якорей в хэш-теги в URL заставляет браузер сразу переходить к указанному якорю на странице, а не начинать сверху и плавно прокручивать вниз? Я не думаю, что вы можете остановить это поведение. Вы можете увидеть пример того, о чем я думаю, здесь. Обратите внимание, что если вы загрузите страницу с #two в URL, браузер сразу же перейдет ко второй секции, не прокручивая.

Вам нужно будет использовать хэш-адреса, которые не соответствуют ничему на странице напрямую, но могут быть обработаны вашим скриптом для поиска правильного местоположения на странице и прокрутки к нему после загрузки страницы. Таким образом, браузер не будет ничего делать, так как не сможет найти якорь, но ваш скрипт сможет. Итак, в приведенном выше примере у вас будет именованный якорь на странице с именем __two или чем-то подобным, и тогда, если вы загрузите http://server/#two, ваш скрипт прочитает location.hash и прокрутит вниз после обработки данных якоря.

Ответ или решение

Конечно! Давайте рассмотрим, как можно реализовать сценарий, когда при переходе по якорной ссылке с другой страницы сначала загружается главная страница, а затем происходит плавная прокрутка к нужному элементу.

Подход к решению проблемы:

Использование кода JavaScript: Вам понадобится использовать JavaScript для контроля перехода по ссылкам. Основная идея заключается в том, чтобы сначала загрузить главную страницу (если пользователь не на ней), а затем прокрутить до соответствующего элемента.
Проблема с совпадением якоря: Если вы попытаетесь перейти напрямую к якорной ссылке на главной странице, браузер автоматически переместит вас к этому якору, и прокрутка не сработает. Поэтому следует использовать "мусорный" якорь, который не будет существовать на главной странице.

Пример кода:

HTML Структура: Предположим, у вас есть следующая структура URL:
- Страница блога: http://ваш-сайт.com/blog
- Главная страница: http://ваш-сайт.com/#раздел1

Создайте янкоровые ссылки:

<a href="http://ваш-сайт.com/#раздел1">Перейти к разделу 1</a>

JavaScript для управления прокруткой:

document.addEventListener("DOMContentLoaded", function() {
   // Проверка, есть ли якорь
   if (window.location.hash) {
       const hash = window.location.hash.substring(1); // Удаляем '#'
       // Прокручиваем к нужному элементу после загрузки
       const target = document.getElementById(hash);
       if (target) {
           target.scrollIntoView({ behavior: 'smooth' });
       }
   }
});

Обработчик переходов на страницы:

В вашем коде для каждой ссылки необходимо проверить, находитесь ли вы на главной странице. Если нет, то редиректите на главную страницу, одновременно добавляя якорь в URL.

document.querySelectorAll('a[href*="#"]').forEach(anchor => {
   anchor.addEventListener('click', function(e) {
       const href = this.getAttribute('href');
       if (!window.location.href.includes("ваш-сайт.com")) {
           // Предотвращаем стандартное поведение ссылки
           e.preventDefault();
           // Перенаправляем на главную страницу с якорем
           window.location.href = `http://ваш-сайт.com/` + href;
       }
   });
});

Заключение:

С помощью этих шагов вы сможете плавно переключаться на необходимый раздел главной страницы даже если пользователь изначально находится на другой странице. Главное — убедиться, что ваше JS-событие сработает только после полной загрузки страницы и что обрабатывается случай отсутствия соответствующего якоря. Надеюсь, это поможет вам решить вашу задачу! Если будут еще вопросы, не стесняйтесь обращаться.