Question

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

所以你左边有一个你的漫画列表，如果你点击其中一个，那么带有jQuery 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();
});

Page Test.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可能是你最好的选择。

否则我会建议在页面上设置一些不可见的链接（比如＆lt; a href =“＃1”id =“link1”＆gt;＆lt; / a＆gt;）然后在ajax完成后你就有了＃你跑：

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

简单但非常有效。

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

2 个答案: