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

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

所以你左边有一个你的漫画列表，如果你点击其中一个，那么带有jQuery load()函数的AJAX右边会加载包含该漫画细节的页面。

我没有每个漫画的页面，但每个系列都有一个页面（一个用于所有“行尸走肉”，一个用于所有“蜘蛛侠”……）所以在每个页面上都可以有很多不同的漫画。

但是，当点击特定漫画时，我不仅要加载正确的页面，还要在此页面中找到正确的位置。

我在每个页面都有锚点（＃i12，＃i13每次都有一个唯一的编号）。

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

我在使用document.location.hash ，不好主意？

---

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

主页 ：

 
 Go to num 120 
 
  

Javascript：

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

Page Test.php：

 
Text1
 ... ... 
Text120 

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(); 

简单，但非常有效。