Проблема с привязкой Chrome/Opera к сайту Squarespace

ВОПРОС

Якорные ссылки на существующем веб-сайте Squarespace перестали работать:

ССЫЛКА НА САЙТ

Веб-страница работает так, как разработано в Firefox и IE, но навигационные ссылки не работают в Chrome (v61.0.3163.100) или Opera (v48.0.2685.35) с момента обновления до последних версий. В Chrome или Opera ссылка мигает намеченное место назначения, но не переходит на это место.

ЧТО Я ПОПРОБОВАЛ

Squarespace организует каждый раздел контента на сайте примерно так:

<div class="parallax-item" data-url-id="contact" id="yui_123456789">
    <div class="title-desc-wrapper over-image no-main-image">
        <div class="title-desc-inner" data-collection-id="3456789012">
            <div class="page-title-wrapper" id="yui_234567890">
                <h1 class="page-title">Contact</h1>
            </div>
        </div>
    </div>
    <div class="content">
    </div>
</div>

Тот факт, что это сайт Squarespace, усложняет проблему. Цель привязки (например, /#contact) - это не div с этим уникальным идентификатором, а html-атрибут data-url-id="contact"'. Div id - это автоматически генерируемый уникальный идентификатор (они начинаются с 'yui_').

Если я вставлю блок кода вручную в Squarespace и добавлю "<div id='contact'></div>"ссылка будет правильно запускаться в Chrome и будет переходить (без анимации) к этому месту. К сожалению, я не могу использовать инструменты Squarespace, чтобы вставить этот div в нужное место на странице или добавить анимацию.

Если я попытаюсь использовать jQuery для "добавления" или "добавления" того же самого "<div id='contact'></div>"на странице в нужном месте (непосредственно внутри родительского div) ссылка на якорь не будет работать, что заставляет меня поверить, что есть какой-то помехи в работе Squarespace javascript?

Любая помощь приветствуется!

1 ответ

@TheNally теперь я понимаю, что вы имеете в виду, хорошо, поэтому я только что провел быстрый тест, и div jQuery append работает, как и ожидалось - привязка без каких-либо анимаций - но вы сейчас добавляете несколько их экземпляров, поэтому он не знает, где указать на.

Я бы предложил добавить идентификатор в каждый раздел .title-desc-wrapper затем включите фрагмент Smooth Scroll для анимации. Относительно незначительные дополнения, которые должны удерживать вас, пока ошибка не будет исправлена.

Другие вопросы по тегам