使用 AJAX 加载并锚定加载的内容

Question

我正在建立一个网站来组织漫画收藏。

所以你在左边有一个你的漫画列表，如果你点击其中一个，带有该漫画详细信息的页面会在右边加载带有 jQ​​uery load() 函数的 AJAX。

我没有为每一个漫画设置一个页面，而是为每个系列（一个用于所有“行尸走肉”，一个用于所有“蜘蛛侠”....），所以每个页面都可以有很多不同漫画。

但是，当点击特定漫画时，我不仅想加载正确的页面，还想进入该页面中的正确位置。

我在每一页都有锚点（#i12,#i13 每次都有唯一的编号）。

如何在使用 AJAX 加载内容后，转到正确的锚点？我尝试动态修改页面 URL（在末尾添加 #i12）但没有成功。

我用的是document.location.hash，坏主意？

---

一个非常简单的例子：点击链接时，页面被加载到 div 中，我希望页面滚动到锚点#i120

主页：

<div id="list">
<a href="test.php#i120">Go to num 120</a>
</div>
<div id="content">

</div>

Javascript：

$("a").live('click',function (event)
{
    $("#Content").load(this.href);

    event.stopImmediatePropagation();
    event.preventDefault();
});

页面测试.php：

<div id="i1">Text1</div>
...
...
<div id="i120">Text120</div>

Answer 1

首先，让我们摆脱无效的 ID，它们在 HTML5 之前不能以数字开头，我会在你的 ID 前加上 id="nav1" 之类的前缀。

那部分是清理，你可以为滚动做的是：

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      document.location.hash = hash;
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

一旦加载内容，它就会运行，所以有一些东西可以滚动到。这种方法会立即生效，因此要对其进行动画处理……这也很简单：

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      var st = $(hash).scrollTop();
      $('html, body').animate({ scrollTop: st }, 200); //200ms duration
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

我们将this.hash 存储为一个变量，因为在该回调中，this 将引用#Content 元素，而不是我们单击的锚点。

Answer 2

Jquery ScrollTo 可能是你最好的选择。

否则，我建议在页面上添加一些不可见的链接（例如 ），然后在 ajax 完成并且您拥有运行的 id # 之后：

$("#link" + idnumber).click();

简单，但非常有效。