I have a page that fits vertically into the window. When a user clicks on a link, I retrieve another page via ajax and insert it into the required element. Everything is functioning properly, however, when the user clicks on another link, the page jumps up which is quite frustrating. I have attempted to use
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
but unfortunately, it did not resolve the issue in both IE and Firefox - the jumping persists.
Is there a reliable trick or workaround that could alleviate this problem?
I suspect that it has something to do with the rendering process. When I click the link, first the loading icon appears. Only after the reports table becomes available does it replace the icon. This causes the browser to add vertical scrolling bars when information is displayed, but they disappear when the reports are switched and replaced by a small loading icon.
I believe I need to capture the scrollbar location when clicking the update link, then, after the ajax updates the page, trigger another function to scroll back to the previous scrollbar position.
This is my temporary "solution" to the issue:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
This essentially keeps my page lengthy, allowing ajax updates to seamlessly integrate.