How to make a scroll bar made by css in microsoft edge back to top when page switching?

Navigation
1

  • Error in: Microsoft Edge

  • Technology used: Angular (4 +)

  • When it happens: Only when the size of the screen is small, and not you can view all items in the table listing
  • Used Table: Angular Material

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

Our Scroll bar is enabled when the screen is small , and when the user clicks next items , the edge renders the next items, with the scroll bar set down

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

The Scroll is created through the following css class: 

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

Code that I used to resolve: 

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

Then you just use this call where you need it, and it's not in a loop, hugs.

    
asked by anonymous 24.06.2018 / 20:04

1 answer

2

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

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

Where you have seletor you put an id, class, tag, or whatever it takes to select the element you want to scroll.

    
24.06.2018 / 22:22
javax.annotation.Nullable class not found Picking up a variable from the foreach