scrollTop not working if inside div class="router-container"

scrollTop not working if inside div class="router-container"
<div class="router-container" cdkScrollable>
<router-outlet></router-outlet>
</div>

.router-container {
overflow: auto;
background-color: rgb($base-color-white);
}

New Component

`<mat-table

table id="overview-trfList-tbl" name="overview-trfList-tbl" (matSortChange)="sortData($event)" [dataSource]="dataSource" matSort class="table-height input-min-spacing table-flex overview-table">

    <!-- Name Column -->
      <ng-container matColumnDef="Name">
        <mat-header-cell *matHeaderCellDef  #nameSpan  sortActionDescription="Sort by Name" id="overview-trfList-header-name-btn" name="overview-trfList-header-name-btn">
        <span mat-sort-header id="overview-trfList-header-name-lbl" name="overview-trfList-header-name-lbl" >Name</span>
        <span #nameColumnFilterOverlay (click)="onNameFilterIconClicked($event)" id="overview-trfList-header-name-filter" name="overview-trfList-header-name-filter" class="overlay-icon">
          <span *ngIf="(displayNameFilterIcon || isNameFilterOverlayPopUpOpen) && !filterNameString"
            class="mat-tbl-icon icon-filter" matTooltipClass="tooltip-style" matTooltipPosition=above
            matTooltip="Filter name"></span>
          <span *ngIf="filterNameString" class="mat-tbl-icon icon-Filter-Applied"matTooltipClass="tooltip-style" matTooltipPosition=above
          matTooltip="Filter name active"></span>
        </span>
        </mat-header-cell>
        <mat-cell *matCellDef="let element; let i = index;">
          <div class="vertical-context" matTooltipClass="tooltip-style" matTooltipPosition=above [id]="'overview-trfList-name-val-'+ i" [name]="'overview-trfList-name-val-'+ i"
          matTooltip="{{element.Name}}" >{{element.Name}}</div>
        </mat-cell>
      </ng-container>  

[id]="'overview-trfList-row-'+ i" [name]="'overview-trfList-row-'+ i"
[routerLink]="['view',row.Code]" [class.selected]="selection.isSelected(row)">

  <div *ngIf="!dataSource.data || (dataSource.data.length === 0)" class="no-method overview-mt" id="overview-trfList-nodata-div" name="overview-trfList-nodata-div">
    <p id="overview-trfList-nodata-lbl" name="overview-trfList-nodata-lbl" [innerHtml]="NoData | linebreak" ></p>
  </div>
  <mat-paginator (page)="test()" #paginator id="overview-trf-table-pagination" name="overview-trf-table-pagination" [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons="true">
  </mat-paginator>`

ts File.
public test(): void {
let mm = document.querySelector('.mat-sidenav-content');
mm.scrollTop = 0;
}

Above code Not working

If I remove <div class="router-container" cdkScrollable> its working, but I need this Div

My Requirement scrollTop should work with div