模拟滚动时从顶部开始的滑入式页面打开

Question

我很难想知道如何用文字来解释这个问题，所以我做了一个快速的线框草图来解释这个问题。

我正在创建一个显示一长串新闻项目的网络应用程序。当有人点击新闻时，.load()我会将.html文件加载到div中并使用CSS转换模拟幻灯片效果。

但是，由于div是页面本身的一部分，并且用户在页面上滚动，因此加载的div与新闻项本身也会滚动。

查看此问题的实时示例here。 调整浏览器大小！

所需解决方案
无论您在概览页面上滚动多少，当您点击某个项目并.load()并在div中添加内容时，它应该从顶部开始，而不是同等滚动。< / p>

原型只适用于iPhone 6+，所以只有在解决方案中才考虑使用iOS。

Answer 1

使用JavaScript

如果需要，您可以使用JavaScript执行此操作。我注意到你的网页使用了jQuery，所以这个解决方案应该能够使用你现在拥有的东西。

$("html, body").animate({ scrollTop: 0 }, 500);

这会动画滚动到网页顶部。将“500”更改为其他内容以获得较慢的效果。

没有JavaScript

您可以考虑使侧面部分仅填充浏览器窗口的100％，并改为拥有自己的滚动区域。这应该意味着侧面只会滚动，当内容被替换时，它应该自动滚动到顶部（假设您删除元素并重新添加它）。