title: how to prevent css div popup from jumping back to the top of the page
body: <p>I'm by no means well versed in JS, but I'm trying to put together a simple portfolio site for school with a black transparent div to act as a lightbox. I'm using CSS and JS to toggle this div, but on a long scrolling page, it jumps to the top when turned on. Here's my CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  div.transbox{
    width:100%;
    height:100%;
    margin:0px 0px;
    position:fixed;
    background-color:#000000;
    background:rgba(0,0,0,0.75);
    z-index:99;
  }
  p.ptransbox{
      width:400px;
      padding:5px;
      position:relative;
      background:rgba(255,255,255,0.5);
      color:#000;
      border-radius:5px;
  }
  img.itransbox{
      padding:10px;
      position:relative;
      background:rgba(255,255,255,0.5);
      border-radius:5px;
  }
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>  var toggle2 = function() {
    var mydiv = document.getElementById('02');
    if (mydiv.style.display === 'none' || mydiv.style.display === '')
      mydiv.style.display = 'block';
    else
      mydiv.style.display = 'none'
    }
  </code></pre>
  
  <p>This is the code that is immediately viewable as the link to open the div (toggle on):</p>
  
  <pre><code>&lt;td style="float:left; width: 33%" class="school"&gt;
  &lt;a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)"&gt;
  &lt;img src="images/thumbs/chair.png" id="Image2" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And this is the code that brings the "lightbox" up, with the option to toggle it off:</p>
  
  <pre><code>&lt;a href="#" onclick="toggle2();"&gt;
  &lt;div align="center" id="02" class="transbox" style="display: none;"&gt;
  &lt;p&gt;&lt;img class="itransbox" src="images/anti-thumbs/chair.jpg" /&gt;&lt;/p&gt;
  &lt;p class="ptransbox"&gt;&lt;strong&gt;Wörner Hall&lt;/strong&gt;, 2010&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Please disregard all the Titles, Alts, or anything that is just specific to the content. You can see my portfolio in action here: <a href="http://www.student.nvcc.edu/home/majeffers3/" rel="nofollow">http://www.student.nvcc.edu/home/majeffers3/</a> and if you notice, when you scroll to the bottom and click on an item, it jumps you to the top. I've been a long time lurker, first time I've ever posted a question because I can't seem to find the solution. Thank you so much for all your help!</p>