Squarespace 网站上的 Chrome/Opera 锚链接问题

Question

问题

现有 Squarespace 网站上的锚链接已停止工作：

LINK

网页在 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）不是具有该唯一 id 的 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 运行干扰？

感谢任何帮助！

Answer 1

@TheNally 我现在明白你的意思了，好吧，我刚刚做了一个快速测试，jQuery append div 可以正常工作——没有任何动画的锚点——但你现在正在附加它们的多个实例，所以它没有不知道该指向哪里。

我建议为每个部分添加一个 id .title-desc-wrapper 然后包含 Smooth Scroll sn-p 以制作动画。相对较小的添加应该会让您在错误得到修复之前一直坚持下去。