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

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 个解决方案

解决方案1
5 已采纳 2018-12-03 19:49:48

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2018-12-03 19:49:48

解决方案1
5 已采纳 2018-12-03 19:49:48