javascript - body 高度改变后保持滚动位置

Question

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

当用户向下滚动页面然后触发编辑模式时，我的问题就出现了——因为页面的高度现在增加了，他们当前的滚动位置丢失了。我一直在尝试寻找一种方法来计算新的 scrollTop 应该是什么，但没有成功。

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

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

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

非常感谢任何帮助!

Answer 1

检查这个 fiddle 。 http://jsfiddle.net/Jn8wq/4/

我加了这个

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

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