Jquery: Prevent window scrolling after link is clicked
<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>
