代码之家 › 专栏 › 技术社区 › Loïc Février

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

anchor ajax jquery

Loïc Février · 技术社区 · 14 年前

所以你在左边有一个漫画列表,如果你点击其中一个漫画,右边的页面会用AJAX和jQuery加载关于漫画的详细信息 load()

我没有为每一个漫画,但为每一个系列(一个为所有的“行尸走肉”,一个为所有的“蜘蛛侠”…)所以在每一页,可以有很多不同的漫画。

然而,当点击一个特定的漫画,我不仅要加载正确的页面,而且要在这个页面上的正确位置去。

我在每一页都有锚(#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();
});

页面Test.php:

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

2 回复 | 直到 14 年前

Nick Craver 14 年前

首先,让我们去掉无效的I d,它们在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 元素,而不是我们单击的锚。

Explosion Pills 14 年前

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

否则,我建议在页面上设置一些不可见的链接(如<a href=“#1”id=“link1”></a>),然后在ajax完成并且您拥有id后运行:

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

简单,但非常有效。

推荐文章

James Williams · 如何在单击按钮时刷新div内容

2 年前

Atif Rizwan · 调用节点。使用AJAX的独立HTML文件的js API

2 年前

Mehmet · javascript执行了多个

2 年前

Shijil · 尝试在Jquery PHP搜索代码中添加选择标记功能

2 年前

Parker · 如何使表格行的单元格项加粗n秒?

3 年前

Chris J. · ajax获取查找数据属性值的请求

3 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

3 年前

Hassaan Iqbal · 点击按钮打开网站,无需重新加载整个页面(AJAX)

3 年前

estudiante · 如何调用在tensorflow中运行的模型,该模型由ajax中的docker提供服务?

3 年前

Pedro F · Ajax调用后脚本运行不正常

3 年前