Question

我正在使用一些jQuery来平滑滚动至锚定链接。这样就可以了，但是单击链接不会更新地址栏中的URL。我希望URL更新以包含单击的链接的新哈希。

我在这里发现了类似的问题，但是它们的原始代码与我的代码有很大不同，以至于我无法弄清楚如何将其实现到我的代码中。

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 800);

    return false;
});

<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
p {
margin-bottom: 200px;
}
</style>
</head>
<a href="#anchor1">Link to Anchor 1</a>
<a href="#anchor2">Link to Anchor 2</a>
<a href="#anchor3">Link to Anchor 3</a>
<a href="#anchor4">Link to Anchor 4</a>
<a name="anchor1"></a>
<p>Anchor 1</p>

<a name="anchor2"></a>
<p>Anchor 2</p>

<a name="anchor3"></a>
<p>Anchor 3</p>

<a name="anchor4"></a>
<p>Anchor 4</p>
</body>
</html>

Answer 1

由于点击处理程序中包含return false，因此将覆盖链接的默认行为。这就是位置栏不更新URL的原因。

您可以手动编辑URL的哈希部分：

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 800);

    // update the URL in location bar
    window.location.hash = $.attr(this, 'href').substr(1);

    return false;
});

单击锚链接后，地址栏中的URL无法更新

1 个答案: