Question

HERE I have a sample to illustrate my problem.

If you scroll to line 41 you can hide / show a fixed box. It works as expected: semitransparent box hides and the page remains quiet.
But if you click on the bottom image the box also hides but the page scrolls to top.

How can avoid that and get the page fixed where the user has scrolled it?

<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;
}

Answer 1

Just get rid of the href on the map. I forked your jsfiddle.

<area shape="rect" coords="3,3,320,84" onclick="$('#box').hide();"/>