使用 AJAX 链接到页面上的 HTML 锚点答案

【问题标题】：Linking to an HTML anchor on a page with AJAX使用 AJAX 链接到页面上的 HTML 锚点
【发布时间】：2014-05-24 11:47:44
【问题描述】：

我在尝试使用 html 锚链接到页面的一部分时遇到问题。问题是我链接到的页面有几个需要时间才能完成的 AJAX 调用。这阻止了我链接到锚点。

<a href="domain.com/view?id=<?=$article['id']?>#anchor">

应该链接到我的视图页面上的 cmets 部分

//Non ajax content
<a id="anchor"></a>
<?php $this->widget('application.components.DisqusWidget', array('article' => $id));?> //The offending AJAX

如果我访问 domain.com/view?id=123，让它加载，然后将 #anchor 附加到 URL，它将我带到相应的部分。但是domain.com/view?id=123#anchor 只会把我带到顶端。有解决办法吗？

【问题讨论】：

您是否尝试将片段放在参数前面（即domain.com/view#anchor?id=123）？或者，注入参数分隔符 (&)：domain.com/view?id=123&#anchor。使用 Javascript/JQuery，您还可以导航到 ready/onLoad 处理程序中的锚点。
AFAIK @BParks 对带有获取参数和锚点的 url 使用正确的语法：stackoverflow.com/questions/10158283/…
你能发一个网站链接吗？

【解决方案1】：

我猜你的 Disqus 小部件会在页面底部附加数据。
只有这样，您的页面才能真正滚动到您的锚点。

解决问题的一种方法是将 JavaScript 处理程序（回调）附加到评论部分的加载函数，该函数将在 AJAX 请求完成后立即触发。
在该回调函数中，您可以像这样触发滚动到您的锚点：

window.location.hash = '#anchor';

【讨论】：

【解决方案2】：

在您的 Ajax 回调中，您可以添加

    location.href=location.hash;

所以它会在 ajax 调用完成后跳转。

【讨论】：