jQuery - 移动到特定元素位置答案

【问题标题】：jQuery - move to a specific element locationjQuery - 移动到特定元素位置
【发布时间】：2011-03-12 07:28:35
【问题描述】：

我有一个这样的分页系统：

[content]
1 2 3 Next >

当您点击 1/2/3/next 时，[content] 元素将通过 ajax 被替换。

问题是如果[内容]的新高度大于之前的高度，屏幕焦点会向上移动。

我可以强制屏幕保持焦点在分页链接所在的位置吗？

【问题讨论】：

【解决方案1】：

您需要找到元素的位置，并在每次高度变化时滚动到该位置。比如：

var p = $(".links").position();
$(window).scrollTop(p.top);

【讨论】：

【解决方案2】：

要使页面透明地显示在同一位置，您需要在加载新内容之前找出链接的位置。

var before = $(".links").offset().top;

然后在新内容加载完毕后，获取链接的新高度。

var after = $(".links").offset().top;

然后计算一下它移动了多少。

var difference = after - before

并相应地更新窗口的滚动位置

$(window).scrollTop( $(window).scrollTop() + difference )

【讨论】：

【解决方案3】：

你可以不用 jQuery 或 javascript 来解决这个问题...只需在用户单击导航链接后在页面顶部创建一个命名锚点，将锚点的名称放在片段标识符中nav 链接，并且不要取消事件，以便页面导航到锚点。

<a name="contentTop"></a>

[content]

<a href="#contentTop" onclick="nextPage(); return true;">Next</a>

【讨论】：