Feature: Sidenav or Route Scroll Service

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Using a common native API call to window.scrollTo(0, 0) or doing something similar on the document body, etc would allow for scrolling the page to the top after a route ends when using a sidenav, otherwise the next view starts at the same position in the page.

What is the current behavior?

Routing between views within the sidenav content maintains the same scroll position assuming the content is the same length.

What are the steps to reproduce?

Add a sidenav and try to scroll to the top of the page anywhere at anytime. Eventually, I figure out this solution and stuck it in my app.component.

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(() => {
        const contentContainer = document.querySelector('.mat-sidenav-content');
        if (contentContainer) {
          document.querySelector('.mat-sidenav-content').scroll({ top: 0, left: 0, behavior: 'smooth' });
        } else {
          this.window.scroll({ top: 0, left: 0, behavior: 'smooth' });
        }
  });

What is the use-case or motivation for changing an existing behavior?

Routing between views within the sidenav should be able to start at the top of the page, which is a common use case. Also, scrolling a browser using the native API has been around forever so it’s a bit confusing when you expect it or one of the many variations of scrolling to work and they don’t.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.2 Angular Material 2.0.0-beta.3

[elishaterada]

Building on @mtpultz answer, you can keep it little simpler if your page is always going to have md sidenav, and without relying on third party library which I assume is what .scroll() is about.

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(() => {
    document.querySelector('.mat-sidenav-content').scrollTop = 0;
  });

[odahcam]

Disclaimer: I’ve post these somewhere else before, but as @Splaktar requested, here are some demos of the routing scrolling issue that I’m experiencing.

Here are two examples, the first working and the second not:

• Routing ‘n’ scrolling w/ regular mat-sidenav-container: https://stackblitz.com/edit/angular-material2-mat-sidenav-router-issue
• Routing ‘n’ not scrolling w/ fullscreen mat-sidenav-container: https://stackblitz.com/edit/angular-material2-mat-sidenav-fullscreen-router-issue

Why that happens? Because when mat-sidenav-container is used with its fullscreen attribute, it gets its own scrolling container instead of relying on the default viewport overflow behavior.

A curious fact is that the router scrolling seems to work when you play with the browser history, but not when you click the links.