这里我有一个示例来说明我的问题。
如果滚动到第 41 行，您可以隐藏/显示一个固定框。它按预期工作：半透明框隐藏并且页面保持安静。但是，如果您单击底部图像，该框也会隐藏，但页面会滚动到顶部。
如何避免这种情况并将页面固定在用户滚动的位置？
<div id="container">
<div id="box" class="oculto">BOX BOX</div>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>32<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>
<button onclick="$('#box').hide();">Hide the box </button><br>
<button onclick="$('#box').show();">Show the box </button><br>
<img src="http://static.adzerk.net/Advertisers/4c4f1be011a447efbce49c1811022e7a.png" width="330" border="0" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area shape="rect" coords="3,3,320,84" href="#" onclick="$('#box').hide();"/>
CSS
#container {
width: 400px;
background-color:yellow;
position:relative;
z-index:2;
min-height:1000px;
}
#box{
width:400px;
height:100px;
position:fixed;
top:0;
z-index:100000;
background-color:black;
color:yellow;
opacity:0.5;
padding:10px;
}