jQuery - 移动到特定元素位置

Question

我可以为您进行翻译。以下是您需要翻译的内容：

我有一个分页系统，类似于这样：

[content]
1 2 3 Next >

当您点击1/2/3/下一页时，[content]元素会通过ajax被替换掉。

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

我能否强制让屏幕保持焦点在分页链接处？

- Alex

Answer 1

每次高度改变时，您需要找到元素的位置并滚动到该位置。类似这样：

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

- Luca Matteis

---

你应该使用 offset 而不是 position。position 是从父元素开始计算的，而 offset 是从文档开始计算的。 - Daniel Von Fange

Answer 2

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

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

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

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

然后进行数学计算，以找出它移动了多少。

var difference = after - before

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

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

- Daniel Von Fange

Answer 3

您可能不需要使用jQuery或JavaScript就可以解决这个问题...只需在您希望页面顶部出现的位置创建一个命名锚点，然后将锚点名称放入导航链接的片段标识符中，在用户单击导航链接时，不要取消事件，以便页面导航到锚点。

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

[content]

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

- Dagg Nabbit