html – AJAX – Server Response moves the top of the page-ThrowExceptions

Exception or error:

I’m trying to use AJAX response in my template. My template look like this.

<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

Bat when i try click on my button “change content” I am always moved to the top of the page. This is very problematic when my site looks like this.

enter image description here

What is the best way to solve this problem? calculation of page length? adding some line of code? any help will be appreciated.

The best solution is to swap the content without moving it back to the top of the page. To keep the user in the same place.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *