Question

首先让我承认我不是最好的编码，我是一名平面设计师，但我正在尝试自学HTML5。我设法解决了我的大多数问题，但我现在很难过。

基本上我的问题是当您点击iframe中的缩略图时，它会将缩略图对齐在屏幕的最顶部。我尝试将translateY添加到“页面”类，我也在iframe页面中尝试了它，但这导致主图片未对齐。

上线

回复陈猫

是的，我认为这就是我需要做的......但它仍然会有相同的水平运动吗？

Answer 1

缩略图链接在点击时将屏幕顶部的容器对齐，因为您在href属性中使用锚点（Uri Fragments），如＃a1＃a2＃a3。

您可以尝试使用这样的小型JavaScript解决方法删除该碎片或阻止页内移动：

$('#thumbs').find('a').bind('click', function() {
    return false;
})

Answer 2

这是转到iframe中的主播的问题，因此如果您定位它们，浏览器往往会以其中的内容为中心。

在你的情况下最简单的解决方案（但不是理想的）是控制滚动的位置，所以如果你要添加

#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }

页面将在视觉上更正确，但仍会滚动。

如果您仍想使用CSS，可以尝试将链接+ #aN:target .page{…}行为更改为一个，这将使用在.page块之前的标签和单选按钮：{{1但是，当你使用无线电而不是链接时，我不确定浏览器是否会滚动页面。