I'm using a JQuery function to slide a div into and out of visibility, but every time I toggle, the browser resets my view to the top of the web page..

What I want to happen is when you click to reveal the div, the page scrolls down and the div content is in full view. When I click again to re-hide the div, I want the page to scroll back up smoothly instead of just reverting to the top of the whole page...

The page url is: http://impactgr.com/chris/test4

Here's my code:
Code:
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>
and on the page:
Code:
<div class="heading">
					<h2><a href="#">check out our work</a></h2>
					<a href="#"><img src="images/downarrow.png" alt="downarrow" /></a>
				</div>
				
				<div class="content">
					<p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
				</div>
Any help is appreciated!
Thanks.