Gowtham Gowtham - 1 year ago 110
Ajax Question

Prevent scroll reset in AJAX

I have a div container that gets its content modified every 3 seconds by a javascript function. The function is initially called by the onload event of the body tag.

function showNow(){

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

xmlhttp.open("GET", "tab.php", true);

setTimeout(showNow, 3000);

The content is being refreshed every 3 seconds. The only problem is that the scroll position is being reset and hence my page jumps back to beginning. This is affecting the usability highly.

Can anyone please suggest a solution?

Answer Source

Before the innerHTML is set, you could get the txtHint element's scrollTop property. Then, after the text is added, set that variable to scrollTop again.

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    var scroll = document.body.scrollTop;
    document.body.scrollTop = scroll;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download