我正在制作一个网站，我想要这样，如果您单击页面底部的按钮，您会转到具有不同布局的新 .html 文件，但我希望它看起来像新页面向上滑动，看起来很酷的过渡。
这是一个例子：
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
我需要它，以便当您单击图片时它会转到一个新页面，但是当它转到该新页面时会有一个“向上滑动”过渡。
谢谢！
您可以使用 iFrame 来完成此操作：
我使用 jQuery Transit 来实现过渡效果：
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
我不确定是否可以进行标准导航。 一些应该可行的选项：
:target对于选项 1，如果您使用历史记录 API，您仍然可以在浏览器中拥有合理的 URL。
我已经成功使用这样的东西：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
唯一的问题是，您可能会看到新页面短暂闪烁，然后消失，然后过渡。如果不使用
iframe您还可以尝试实现类似 vertical slider 的东西，非常类似于 coda slider 但这个是为垂直滚动而开发的。 演示。
我尝试在整页上进行此类转换，但发现很困难。 （但我是JQ N00B）
魔术滑块提供水平和垂直滚动，并且更容易实现。
另请查看this（此处为教程），这可能是满足您需求的简单解决方案。
其实我觉得最后这一款最接近你想要的了
这些答案都使用 JS，尽管这篇文章很旧，但它仍然会出现在搜索结果中，所以我想提供一个纯 CSS 解决方案的更新。您现在可以使用 @view-transition 规则来执行此操作，无需 JavaScript。