How do I make a css scroll bar in microsoft edge go back to top when changing pages?

Question

• Error in: Microsoft Edge

• Technology used: Angular(4+)

• When it happens: Only when the screen size is small, and not it is possible to display all items of the table listing
• Table Used: Angular Material

Next, I’m doing a project with Angular(4+), where I’m using a Material Angular table.

Our scrollbar is activated when the screen is small, and when the user clicks on next items, the edge renders the next items, using the scroll set down

At first glance, the edge displays the table normally with the scroll bar and the items. When the user clicks to see the next results, since we display 10 at a time, the edge renders with the scroll down, forcing the user to have to scroll up the screen again.

Scroll is created through the following css class:

  .table-container {
    flex: 1;
    overflow: auto;   
    display: flex;
    flex-direction: column;
  }

Code I used to solve:

  /** 
   * This function fix report scroll position after change page listener 
   */ 
  materialScrollDownToUp() { 
    document.getElementById('material-scroll-detect').scrollTop = 0; 
  } 

Then you just make use of that call where you need to, and it doesn’t get in a loop, hugs.

Answer 1

Move the element scroll to the top using scrollTop = 0 with a little delay in the setTimeout:

setTimeout(function(){
    document.querySelector(seletor).scrollTop = 0;
}, 50);

Where has seletor you place an id, class, tag or that is necessary to select the element in which you want to apply the scroll.