Ajax Load Into <div> with child window scrolls to top of webpage - php

Question

Here is my dilemma, I am calling my external pages via ajax into a <div>, within the <div> I have links that callback to the parent window which triggers the ajax load event for the next page. My problem is the call back brings the website to the top of the page. Here is the code;
Parent Window:
function Display_Load() {
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='<?php echo $reg->get ('rel_addr'); ?>img/load.gif' height='50' width='50' />"); return false;
}
function Hide_Load() {
$('#midback').fadeIn('slow');
$("#loading").fadeOut('slow');
}
function loadContent(page) {
var param = "";
if (page) { param = page; } else { param='home'; }
Display_Load();
$('#midback').fadeOut('slow', function() {
$(this).load("<?php echo $reg->get ('rel_addr'); ?>"+param+".php",
Hide_Load()); return false;
});
Child Window Code:
<span id="events" class="more">more events...</span>
<script type="text/javascript">
$(document).ready(function() {
$('.more').click(function() {
var params = $(this).attr("id");
window.parent.loadContent(params);
}); return false;
});
I would also like to animate the height of the <div> (close it then reopen it to correct height of new page) as well, first I would like to get this out of the way however.

Answer 1

Try changing your click on the child to:
$('.more').click(function(e) {
e.preventDefault();
// . . .
return false;
});
See http://api.jquery.com/event.preventDefault/
The problem is when you click on the more class, you are likely appending a # to the end of your URL. This causes the page to jump up to the top. Per the documentation, the preventDefault will stop this from happening. For good measure, also return false from the click function.