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

Question

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

左侧有一个漫画列表，如果单击其中一个，包含该漫画详细信息的页面将通过 AJAX 和 jQuery load() 加载到右侧> 功能。

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

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

我在每个页面都有 anchor (#i12、#i13 每次都有一个唯一的编号)。

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

我使用的是document.location.hash，这是个坏主意吗？

<小时/> 一个非常简单的例子:当点击链接时，页面被加载到 div 中，我希望页面滚动到 anchor #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 元素，而不是我们点击的 anchor 。