我要建一个网站，以举办漫画系列。

所以，你有你的漫画留下了名单上，如果你点击其中之一，有关该漫画的细节加载页面时在右侧与AJAX使用jQuery的负载（） 的功能。

我没有一个网页，每一个漫画，但对于每一个意甲（一个用于所有的行尸走肉，一个是所有的蜘蛛侠......），所以每一个页面，该页面可以有很多不同的漫画。

但是在一个特定的漫画，当点击我不仅要加载正确的页面，但也走在这个页面的正确位置。

我在每个页面的锚（＃I12，I13＃每次用一个唯一的编号）。

如何，之后使用AJAX加载的内容，去正确的锚？我试图动态修改页面的URL（添加＃I12底），但没有成功。

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

一个很简单的例子：在链接上点击时，页面加载到div和我想的页面滚动到锚＃I120

主页：

 ＆LT; D​​IV ID =清单＆GT;
＆LT; A HREF =test.php的＃I120＆GT;转到NUM 120℃; / A＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =内容＆GT;

＆LT; / DIV＆GT;
 

JavaScript的：

  $（A）。生活（点击，函数（事件）
{
    $（＃内容），负载（this.href）。

    event.stopImmediatePropagation（）;
    。事件preventDefault（）;
}）;
 

页test.php的：

 ＆LT; D​​IV ID =I1＆GT;文本1＆LT; / DIV＆GT;
...
...
＆LT; D​​IV ID =I120＆GT; Text120＆LT; / DIV＆GT;
 

解决方案

首先，让我们摆脱无效的ID，他们不能以数字开头，直到HTML5，我倒是preFIX您的ID与像 ID =NAV1。

这部分是清理，你能为滚动操作是这样的：

  $（A）。生活（点击，函数（事件）{
    VAR哈希= this.hash;
    $（＃内容）。载荷（this.href，函数（）{
      document.location.hash =散列;
    }）;
    event.stopImmediatePropagation（）;
    。事件preventDefault（）;
}）;
 

这会运行一次的内容加载，所以有一些滚动到。这种做法立刻去那里，所以要制作动画...这是很容易的，以及：

  $（A）。生活（点击，函数（事件）{
    VAR哈希= this.hash;
    $（＃内容）。载荷（this.href，函数（）{
      VAR ST = $（散）.scrollTop（）;
      $（'HTML，身体）动画（{scrollTop的：ST}，200）; // 200毫秒时间
    }）;
    event.stopImmediatePropagation（）;
    。事件preventDefault（）;
}）;
 

我们要存储 this.hash 作为一个变量，因为该回调里面，这将参照＃内容元素，而不是我们点击了锚。

I'm building a website to organize comics collections.

So you have on the left a list of yours comics and if you click on one of them, the page with the details about that comic is loaded on the right with AJAX with the jQuery load() function.

I don't have a page for every comic but for every serie (one for all the "Walking dead", one for all the "Spiderman"....) so on every page that can be a lot of different comics.

However when clicking on a specific comic I not only want to load the correct page but also to go at the correct position in this page.

I have anchors in every page (#i12,#i13 with a unique number each time).

How can I, after the content is loaded using AJAX, go to the correct anchor ? I tried to dynamically modify the page URL (adding a #i12 at the end) but without success.

I was using document.location.hash, bad idea ?

A very simple example : when clicking on the link the page is loaded into the div and I would like the page to scroll to the anchor #i120

Main page :

<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>

First, let's get rid of invalid IDs, they can't start with a number until HTML5, I'd prefix your IDs with something like id="nav1".

That part is cleanup, what you can do for the scrolling is this:

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

That'll run once the content is loaded, so there's something to scroll to. That approach instantly goes there, so to animate it...that's easy enough as well:

$("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();
});

We're storing this.hash as a variable because inside that callback, this will refer to the #Content element, not the anchor we clicked on.