javascript - 滚动到顶部不明显或裁剪顶部溢出

Question

这个问题有点难以解释:我在页面底部有一个图像。单击该图像后，我通过 ajax 加载下一页，而不删除该图像。如何裁剪或删除图像上方的所有空间？或者，也许更好的说法是如何在不引人注意的情况下滚动到顶部？

Here is perfect example我想要完成的事情 - 转到页面底部，看看单击图像时会发生什么。这背后的概念是什么？

Answer 1

我可以具体告诉你该网站在做什么。

他们将每个页面放在一个名为 <div class="page-container"> 的容器中。当您单击底部链接时，会出现一个新的 <div class="page-container">添加了 css top属性将其推离屏幕底部，并且两个页面容器都设置为 position:absolute .

top两个页面容器的 css 属性都使用 Javascript 计时器进行动画处理，直到第一个 <div class="page-container">被推出屏幕顶部，然后第一个页面容器将从 DOM 中删除。

同时，页面容器通过操纵 top 移动属性中，滚动条位置是动画的，因此它会随着容器一起移动。动画完成后，新页面容器设置为 position:relative ，滚动条再次位于屏幕顶部。

为了方便起见，这里是一个使用 jQuery 的粗略示例 https://jsfiddle.net/0bzt9mmq/