How to reset the scroll position after loading of different components, when dealing with a static header and overflow on content container?

Question

Looking for a good solution for a problem with scrolling :)

Initial setup

I have a general application structure which looks like this:

• Main container (app-component -> div of fixed 100vh size):
  • Header (div with app-header and fixed size)
  • Content (div with router-outlet and overflow: auto) - fixed size 100vh - header height

<div>
  <div class="app-header">
    <app-header></app-header>
  </div>

  <div class="app-content">
    <router-outlet></router-outlet>
    <div class="app-footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

In content container I load tool component, which inside loads different other small step-components. Step-components can have different height based on it's content. Step-components loaded without routing changes.

Structure of the tool-component looks like this:

• Tool component
  • Step-Component 1
  • ....
  • Step-Component X

Tool component is in charge of switching between different step-components.

Problem

The problem that I encounter is that when one of the step-components with big height is loaded, then I do scroll down to the bottom of the page (actually it's an app-content scroll), then load another component with the same height, my scroll position remains on the same place. This happens because scrolling appears on 'app-content' container level (exactly where I wanted it to be).

Answer 1

Finally, I've implemented the following solution.

I've created the service app-scroll.service which looks like this:

@Injectable({
  providedIn: 'root'
})
export class AppScrollService {

  appComponentScrollToContainerId = 'appComponentScrollToContainerId';
  constructor() { }

  scrollToTop(){
    const container = document.getElementById(this.appComponentScrollToContainerId);
    if(!container){
      throw new Error('Scroll container was not found');
    }
    container.scroll(0, 0);
  }
}

Then I've injected it into the app.component and used it to set the scroll container ID where I want to do scrolling:

<div>
  <div class="app-header">
    <app-header></app-header>
  </div>

  <div class="app-content" [id]="appScrollService.appComponentScrollToContainerId">
    <router-outlet></router-outlet>

    <div class="app-footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

Then, I do inject this service in the places where I have the problem with the scrolling and call it when needed.

It is also can be called on route change event, in case there will be a need.

If anyone knows a better solution, please let me know :)