gpt4 book ai didi

javascript - 单击 anchor 链接后地址栏中的 URL 未更新

转载 作者:行者123 更新时间:2023-11-28 05:12:16 25 4
gpt4 key购买 nike

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

最佳答案

由于您在点击处理程序中设置了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;
});

关于javascript - 单击 anchor 链接后地址栏中的 URL 未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53600797/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com