我构建了一个带有弹出链接的简单页面。在桌面上运行良好。
我不知道如何以正确的方式解决问题，我的意思是，我可以找到一个糟糕的解决方案，但我想知道正确的解决方案。在手机上，当从弹出图像中单击返回时，它会返回到主页中间的某个位置，而不是页面顶部。这是一个可以尝试的在线示例:
html, a {text-decoration:none;}
div {margin:0 auto 10px auto; height:200px; width:200px}
h1 {font: normal 90px Helvetica, Sans-Serif;
letter-spacing: 0.5px;
line-height:1px;
position: relative;
top:100px;
text-align: center;
margin: 0;
left:0;
right:0;
font-weight: 800;
color:#000000}
.popup {
position: absolute;
padding-top:30px;
width: 100%;
height: 100%;
display: none;
text-align:center;
z-index: 200;
opacity:1;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0,2s;
animation-name: fadein;
animation-duration: 0.2s;
}
.popup img {
padding: 4px;
width: 80%;
z-index: 120;
border: solid 1px gray;
cursor: pointer;
background-color:#FFFFFF;
}
@media only screen and (max-width: 540px) {
div {margin:0 auto 10px auto; height:200px; width:auto}
}<body bgcolor="gray">
<div class="button" style="background-color:#049EA4;"><a href="#01"><h1>01</h1></a>
</div>
<div style="background-color: #F1FB00"><a href="#02"><h1>02</h1></a>
</div>
<div style="background-color: #1779F0;"><a href="#03"><h1>03</h1></a>
</div>
<div style="background-color: #FF00CF;"><a href="#04"><h1>04</h1></a>
</div>
<div style="background-color: #FFA200;"><a href="#05"><h1>05</h1></a>
</div>
<div style="background-color: #0042FF;"><a href="#06"><h1>06</h1></a>
</div>
<div style="background-color: #A01CF0;"><a href="#07"><h1>07</h1></a>
</div>
<div style="background-color: #0DF186;"><a href="#08"><h1>08</h1></a>
</div>
<div id="01" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/pekann%C3%B6t-plant-pot-rattan__0132102_pe286857_s4.jpg" alt="01"></a></div>
<div id="02" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/or%C3%A4dd-plant-pot-in-outdoor-beige__0108864_pe258535_s4.jpg" alt="02"></a></div>
<div id="03" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/socker-plant-pot-in-outdoor-galvanised__0107648_pe257427_s4.jpg" alt="03"></a></div>
<div id="04" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/huson-plant-pot__12045_PE089408_S4.JPG" alt="04"></a></div>
<div id="05" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/ingef%C3%A4ra-plant-pot-with-saucer-outdoor-terracotta__0313254_pe513840_s4.jpg" alt="05"></a></div>
<div id="06" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/ragkorn-plant-pot__0134053_PE289885_S4.JPG" alt="06"></a></div>
<div id="07" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/skurar-plant-pot-in-outdoor-off-white__0114580_pe267097_s4.jpg" alt="07"></a></div>
<div id="08" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/hasselnot-plant-pot__0119553_PE275934_S4.JPG" alt="08"></a></div>谢谢
最佳答案
这是因为您的图片在页面底部弹出，所以当您关闭图片时，您看到的是页面底部。
要使您的弹出窗口出现在页面顶部，请将 top: 0; 添加到您的 .popup 类中:
.popup {
position: absolute;
top: 0;
padding-top:30px;
width: 100%;
height: 100%;
display: none;
text-align:center;
bgcolor:yellow;
z-index: 200;
opacity:1;
}
关于html - 从设备上的弹出窗口链接回来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39894434/