Question

我有一个drop anchor，它从整页视差图像底部的向下箭头链接到页面上的另一个部分。放锚：

6970b2a5-e220-4d68-8fc0-2992a1b8bdb7

它去了哪里：

<section id="first" class="big-image parallax lander" style="background-image: url(&quot;https://wagstaffsandbx.wpengine.com/wp-content/uploads/2017/06/Homepage-Photo-1.jpg&quot;); background-position: 50% -7.2px;" data-stellar-background-ratio="0.2" data-stellar-vertical-offset="50">

    <a href="#welcome" class="arrow"><img class="down-arrow" src="https://wagstaffsandbx.wpengine.com/wp-content/uploads/2017/06/down-arrow.png" alt="down-arrow"></a>

</section>

单击箭头可以工作，但是平滑滚动到下降锚点，它会滚动到正确的位置，然后向下移动，没有明显的原因。

这是我用来实现平滑滚动的jQuery。您将看到140px导航的偏移量：

<section id="welcome" class="text-block"><h1>welcome</h1><p>Pitchfork mumblecore stumptown, intelligentsia wolf put a bird on it man bun wayfarers organic actually sartorial. Sriracha disrupt kickstarter fingerstache selvage pour-over. Paleo ugh lumbersexual, kinfolk banjo banh mi meditation cliche 3 wolf moon single-origin coffee viral blog polaroid pop-up.</p>
</section>

您可以在此处查看问题：https://wagstaffsandbx.wpengine.com/test-stellar/

联合国看网站：演示 PW查看网站：密码

有什么想法吗？

Answer 1

您的问题是由此引起的：

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;

以这种方式更改location会触发浏览器的相应反应。

建议将其替换为以下内容：

if (typeof (history.pushState) !== 'undefined') {
    var obj = {title: $('head title').text(), URL: hash};
    history.pushState(obj, obj.title, obj.URL);
}

跳绳/跳下降锚

1 个答案: