Scroll to a specific y position in element

Question

I have a legacy application running in compatibility mode (IE11) in Edge Chromium. There is a portion of the page using AJAX to auto refresh a table every 10 seconds. When the users are scrolling through the results of the table, it auto refreshes and they loose their place in the table. The frequent refreshing is required due to a very dynamic environment.

The "window.scrollTo(0,yElemnt);" does not work because it tries to scroll the whole window instead of the table housed within TPicks.asp.

function ShowPicks(){
var elmnt = ""
var yElmnt = 0


if (document.getElementById("scrollPicks")) {
  elmnt = document.getElementById("scrollPicks");
  yElmnt = elmnt.scrollTop;
}

if (window.XMLHttpRequest) {
  
  var xmlhttp = new XMLHttpRequest();
  
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      
      document.getElementById("AutoPickDiv").innerHTML = this.responseText;
      if (document.getElementById("scrollPicks")) {
        alert(yElmnt);
        document.scrollTo(0,yElmnt);
      }
    }  
  }
}
//alert("Picks.asp");
var RandNbr = Math.round(Math.random()*10000000);
xmlhttp.open("POST", "TPicks.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("rand=" + RandNbr);

}

How do I get just the table to scroll? I have the pixel position of where the table is currently scrolled to within "elmnt.scrollTop;". The alert after the AJAX call returns as complete shows where the current scroll position is also - "alert(yElmnt);".

Thank you for your help!

Answer 1

Your code is setting document.scrollTop to the y-axis when you should be targeting something different. You have to wrap your table in a element that can, eg a DIV. Then, you must apply a height and overflow-y CSS property to that element. Then, you need a javascript function that can set the scrollTop property of that element to zero.

Check out this jsfiddle for a working example: https://jsfiddle.net/bf4zngy7/

<div id="wrapper">
    <div id="tablewrapper" style="max-height:100px; overflow-y:scroll">
        <table border=1>
            <!-- insert your data rows here -->
        </table>
    </div>

    <div id="buttonwrapper">
        <button type="button" onclick="scrollToTop()"">Scroll to top</button>
    </div>
</div>

And when the button is clicked, this function fires:

function scrollToTop(){
  const tablewrapper = document.getElementById('tablewrapper');
  if(tablewrapper){
    tablewrapper.scrollTop = 0;
  }
}

In my solution, you are not actually scrolling the table, but rather the element that contains the table. Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop for more information on why setting the scrollTop property of the element works.