jQuery - 移动到特定的元素位置

Question

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

[content]
1 2 3 Next >

当你点击1/2/3 / next时，[content]元素会被ajax替换。

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

我可以强制屏幕保持专注于分页链接的位置吗？

Answer 1

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

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

Answer 2

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

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

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

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

然后进行数学运算以了解它的移动量。

var difference = after - before

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

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

Answer 3

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

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

[content]

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