logo标签列表

点击锚链接后地址栏中的URL未更新

javascriptjqueryhtml
5

我在使用一些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>

1个回答
7

由于您的点击处理程序中有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;
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接