Skip to content

Angular 5 Scroll to top on every Route click

I am using Angular 5. I have a dashboard where I have few sections with small content and few sections with so large content that I am facing a problem when changing router while going to top. Every time I need to scroll to go to top.

How can I solve this issue so that when I change the router, my view always stay at the top?



There are some solutions, make sure to check them all 🙂


The router outlet will emit the activate event any time a new component is being instantiated, so we could use (activate) to scroll (for example) to the top:


<router-outlet (activate)="onActivate($event)"></router-outlet>


onActivate(event) {
   // window.scroll(0,0);

           top: 0, 
           left: 0, 
           behavior: 'smooth' 

    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)

As the smooth scroll is not implemented well in Safari, use, for exemple, this solution for a smooth scroll:

onActivate(event) {
    let scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20); // how far to scroll on each step
        } else {
    }, 16);

If you wish to be selective, say not every component should trigger the scrolling, you can check it in an if statement like this:

onActivate(e) {
    if ("login"{ // for example


Since Angular6.1, we can also use { scrollPositionRestoration: 'enabled' } on eagerly loaded modules and it will be applied to all routes:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

It will also do the smooth scrolling, already. However this has the inconvenient for doing it on every routing.


An other solution is to do the top scrolling on router animation. Add this in every transition where you want to scroll to the top:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true }) 
User contributions licensed under: CC BY-SA
3 People found this is helpful