如何在分页更改时滚动到材料表的顶部

Question

我遇到了一个问题，在材料表中，我点击下一步按钮，滚动停留在底部，而它应该滚动到顶部。

<mat-table class="table-container" fxFlex="100" [dataSource]="allUsersDataSource">
  <ng-container matColumnDef="firstName">
    <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
    <mat-cell fxFlex="25" *matCellDef="let element"> {{element.first_name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
    <mat-cell fxFlex="25" *matCellDef="let element"> {{element.last_name}} </mat-cell>
  </ng-container> 
     
  <mat-header-row *matHeaderRowDef="allUsersColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: allUsersColumns;"></mat-row>
</mat-table>

<mat-paginator #allUsersPaginator [pageSizeOptions]="[25,50,100]" (page)="onAllUserPaginateChange($event)"
    [length]="allUserPagination.length" [pageSize]="25" showFirstLastButtons></mat-paginator>

这是后面的代码

onAllUserPaginateChange(event: any) {
  window.scroll(0,0);
}

Answer 1

这里我给了桌子一个ID

例如。

<mat-table id ="matTable" class="table-container" 
  [dataSource]="allUsersDataSource">
<mat-table>

在打字稿文件中该表的分页方法中。

onAllUserPaginateChange(event: any) {
  const matTable= document.getElementById('matTable');
  matTable.scrollTop = 0;
}

Answer 2

在 ts 文件中使用以下分页 onchange 函数

const peopleIcanTop = document.getElementById('peopleIcanTop');
peopleIcanTop.scrollIntoView();