我正在处理具有两种状态的页面:编辑模式和正常模式。用户通过单击切换按钮在这些状态之间切换。触发编辑模式会向页面添加更多元素(按钮等),从而强制 body
元素增加其高度。
当用户向下滚动页面然后触发编辑模式时,我的问题就出现了——因为页面的高度现在增加了,他们当前的滚动位置丢失了。我一直在尝试寻找一种方法来计算新的 scrollTop
应该是什么,但没有成功。
我有一个 jsFiddle 作为我的问题的例子。它会自动滚动到第三个“条目”,以模拟用户向下滚动到那么远。单击右上角的“触发更改”按钮将向页面添加更多元素,并且页面顶部的第三个条目的滚动位置将丢失。
我知道我可以重做 $('body').scrollTop($('.entry:nth-child(3)').offset().top);
之后新内容已添加,但我希望无论用户滚动到页面上的哪个位置,都能记住滚动位置。
非常感谢任何帮助!
最佳答案
检查这个 fiddle 。 http://jsfiddle.net/Jn8wq/4/
我加了这个
var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);
您会注意到我在滚动位置添加了“9”。它适合您在给定 fiddle 中的要求。但是当您在您的实际网站上实现它时,您将必须动态计算新附加 div 的高度并添加该高度而不是“9”。
关于javascript - body 高度改变后保持滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17357228/