components do not scroll to top when routes change.

[dobrinsky]

Hi,

I have the paper-dashboard-pro-angular product. It is great. The problem is that when clicking on a component, the normal behavior is to scroll the window to top. This does not work in your product. I have tried all options on the internet to make it scroll to top, but it does not.

I think something is breaking this behavior. I removed perfect-scrollbar from the project and all its classe from CSS, but it still does not work.

A little help would be really appreciated.

Thank you, Andrei Dobrin

[chelaruc]

Hi, @dobrinsky! Thank you for using our product. You can try something like this: in src/app/layouts/admin/admin.component.ts:

import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '@angular/common';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';

export class AdminLayoutComponent implements OnInit {
    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];
    url: string;
    location: Location;
    constructor( private router: Router, location: Location ) {
        this.location = location;
    }
    ngOnInit() {
        const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
        const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
        this.location.subscribe((ev:PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });
         this.router.events.subscribe((event:any) => {
            if (event instanceof NavigationStart) {
               if (event.url != this.lastPoppedUrl)
                   this.yScrollStack.push(window.scrollY);
           } else if (event instanceof NavigationEnd) {
               if (event.url == this.lastPoppedUrl) {
                   this.lastPoppedUrl = undefined;
                   window.scrollTo(0, this.yScrollStack.pop());
               }
               else
                   window.scrollTo(0, 0);
           }
        });
}

Tell me if it works.

[dobrinsky]

Nope,

Did you actually test that for yourself or are you just copying responses from stackoverflow?

[dobrinsky]

When I wrote that the normal behavior should be scrolling, I meant that your template doesn't do that...

[chelaruc]

@dobrinsky in ngOnInit() add this:

 const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
 const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
                    elemMainPanel.scrollTop = 0;
                    elemSidebar.scrollTop = 0;
               });

[dobrinsky]

I found another solution which I think is much cleaner.

It was obvious that the normal behavior was broken by something. It had to be something that was added to the template that broke the scroll calculation or something.

My solution was to remove the main div from the main component (AppComponent), the one with wrapper class if I remember correctly and then it worked with no javascript or anything.

Thank you for your time Ciprian

[chelaruc]

I'm glad you have found a solution.

All the best, Ciprian