title: Page jumps to top when I select javascript element?
body: <p>Does anybody know why it's jumping to the top when one of the bin <code>&lt;div&gt;</code>s is selected? I've tried everything, and it just won't work (in Chrome, at least).</p>
  
  <p>Here's my script:</p>
  
  <pre><code>&lt;script&gt;
   $(document).ready(function () {
          $("#bin1").click(function(){ 
             $("#div1").slideDown("1000"); 
             $("#div3").hide(); 
             $("#div2").hide();  
             $("#div4").hide();
          });
         $("#bin2").click(function(){ 
             $("#div2").slideDown("1000"); 
             $("#div3").hide(); 
             $("#div1").hide();  
             $("#div4").hide();
          });
        $("#bin3").click(function(){ 
            $("#div3").slideDown("1000"); 
             $("#div1").hide(); 
             $("#div2").hide();  
             $("#div4").hide();
         });
       $("#bin4").click(function(){ 
            $("#div4").slideDown("slow"); 
            $("#div3").hide(); 
            $("#div2").hide();  
            $("#div1").hide();
  
            return false;
        });
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="binheader" style="padding-top:20px;"&gt;
    &lt;a href="javascript: return null;" id="bin1"&gt;
      &lt;img src="img/black bin name.png"
      style="width:200px; float:left;" /&gt;
    &lt;/a&gt;
    &lt;a href="javascript: return null;" id="bin2"&gt;
      &lt;img src="img/green bin name.png"
      style="padding-left:33px; width:200px; float:left;" /&gt;
    &lt;/a&gt;
    &lt;a href="javascript: return null;" id="bin3"&gt;
      &lt;img src="img/yellow box name.png"
      style="padding-left: 34px; width:200px; float:left;" /&gt;
    &lt;/a&gt;
    &lt;a href="javascript: return null;" id="bin4"&gt;
      &lt;img src="img/green box name.png"
      style="padding-left:33px; width:200px; float:left;" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>