title: Jquery: Prevent window scrolling after link is clicked
body: <p>I have 2 links that hide present different information to the users on the main page. If one link is clicked, the new info appears on screen. Problem is, when I click on any of the links, the window is taken back to the top of the page. I would like to prevent this behavior as it is annoying. </p>
  
  <p>Here is the code for the links</p>
  
  <pre><code>&lt;div align="right" id="ajaxIncomingMail"&gt;&lt;a href="#" class="incomingMail"&gt;Incoming Mail&lt;/a&gt;&lt;/div&gt;&lt;div id="ajaxOutgoingMail"&gt;&lt;h5&gt;&lt;a href="#" class="outgoingMail"&gt;Outgoing Mail&lt;/a&gt;&lt;/h5&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and here is the code for the jquery:</p>
  
  <pre><code>        $(function(){
        $("a.incomingMail").click(function(e){
              e.preventDefault();
              $("#ajaxMailShowContentOutbox").hide();
              $("#ajaxMailShowContentInbox").fadeIn("slow");
          });
  
          $("a.outgoingMail").click(function(e){
              e.preventDefault();
              $("#ajaxMailShowContentInbox").hide();
              $("#ajaxMailShowContentOutbox").fadeIn("slow");
          });
          return false;
      });
  </code></pre>
  
  <p>Here I am using preventDefault() and it's still not working!? I also tried return false, but that didn't work also. I don't know if it matters, but the info that is presented is pulled with php from the db. How can I make the scrolling stop when I click on the link??</p>