Tendrá que hacer dos cosas para que el código existente funcione:

• Las variables de los componentes se pierden cuando se destruye el componente. Entonces, en lugar de usar la variable del componente para almacenar la posición actual, use los almacenamientos del navegador como sessionStorage / localStorage o use una variable from shared service y establezca la id en las filas. Por ejemplo, puedes hacer algo como:

 get elementClickedId() { return sessionStorage.getItem('elementClickedId'); } set elementClickedId(id) { sessionStorage.setItem('elementClickedId', id); }

Establecer id dentro de su html:

 <td mat-cell *matCellDef="let element" [id]="element.position"> {{ element.position }} </td>

• Cuando intenta hacer document.getElementById, la vista no se inicializa, por lo que no se desplaza automáticamente. Entonces, en lugar de llamar a moveToSection en ngOnInit , hágalo en ngAfterViewInit .

Ejemplo de trabajo: https://stackblitz.com/edit/angular-material-router-eo6wnt?file=src/app/plain/plain.component.ts

PD: Angular viene con scrollPositionRestoration de configuración de navegación que ayuda a lograr esto. Pero desafortunadamente no funciona todo el tiempo, tiene un defecto: https://github.com/angular/angular/issues/24547

Necesita un servicio singleton para mantener la posición actual:

(Tenga en cuenta que también podemos usar localStorage o sessionStorage , pero se recomienda encarecidamente usar el servicio singleton y es mejor que usarlo de otra manera).

 @Injectable({ providedIn: 'root', }) export class ApiService { elementClickedId:any; }

Y también necesita establecer una identificación para su td:

 <td mat-cell *matCellDef="let element" id={{element.position}}>{{ element.position }}</td>

Y use ngAfterViewInit en lugar de ngOnInit para asegurarse de que después de completar la representación de su tabla, configure el desplazamiento.

Aquí hay una muestra de trabajo que he creado para usted: StackBlitzForked