更改主体高度后保持滚动位置

时间:2013-06-28 04:33:17

标签: javascript jquery

我正在处理一个有两种状态的页面:编辑模式和普通模式。用户通过单击切换按钮在这些状态之间切换。触发编辑模式会向页面添加更多元素(按钮等),从而强制body元素增加其高度。

我的问题出现在用户向下滚动页面然后触发编辑模式时 - 由于页面的高度现在已经增加,它们当前的滚动位置会丢失。我一直试图找到一种方法来计算新的scrollTop应该是什么,但是没有成功。

我有一个jsFiddle作为我的问题的一个例子。它会自动滚动到第三个“条目”,以模拟向下滚动的用户。单击右上角的“触发更改”按钮将向页面添加更多元素,并且页面顶部第三个条目的滚动位置将丢失。

我知道在添加新内容后我可以重做$('body').scrollTop($('.entry:nth-child(3)').offset().top);,但无论用户在页面上滚动到哪里,我都希望记住滚动位置。

http://jsfiddle.net/Jn8wq/2/

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

检查这个小提琴。 http://jsfiddle.net/Jn8wq/4/

我添加了这个

var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);

您会注意到我在滚动位置添加了'9'。它适合您在给定小提琴中的要求。但是当你在实际网站上实现它时,你必须动态计算新附加div的高度,并添加该高度而不是'9'。

答案 1 :(得分:0)

要使元素在其上方发生变化后将其保留在窗口中,请尝试以下操作:

library(astsa)
data("Lynx")