Angular 2 Scroll to top on Route Change

Question

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page  it does change the route and takes me the next page but it doesn t scroll to the top of the page  As a result  if the first page is lengthy and 2nd page has few contents  it gives an impression that the 2nd page lacks the contents  Since the contents are visible only if user scroll to the top of the page   I can scroll the window to the top of the page in ngInit of the component but  is there any better solution that can automatically handle all routes in my app

User · Answer

Hi guys this works for me in angular 4  You just have to reference the parent to scroll on router change  layout component pug  wrapper  outlet  quot  quot       router-outlet  activate   routerActivate  event outlet     layout component ts  public routerActivate event outlet       outlet scrollTop   0

User · Answer

Angular 6 1 and later  Angular 6 1  released on 2018-07-25  added built-in support to handle this issue  through a feature called  quot Router Scroll Position Restoration quot   As described in the official Angular blog  you just need to enable this in the router configuration like this   RouterModule forRoot routes   scrollPositionRestoration   enabled     Furthermore  the blog states  quot It is expected that this will become the default in a future major release quot   So far this hasn t happened  as of Angular 11 0   but eventually you won t need to do anything at all in your code  and this will just work correctly out of the box  You can see more details about this feature and how to customize this behavior in the official docs  Angular 6 0 and earlier  While  GuilhermeMeireles s excellent answer fixes the original problem  it introduces a new one  by breaking the normal behavior you expect when you navigate back or forward  with browser buttons or via Location in code   The expected behavior is that when you navigate back to the page  it should remain scrolled down to the same location it was when you clicked on the link  but scrolling to the top when arriving at every page obviously breaks this expectation  The code below expands the logic to detect this kind of navigation by subscribing to Location s PopStateEvent sequence and skipping the scroll-to-top logic if the newly arrived-at page is a result of such an event  If the page you navigate back from is long enough to cover the whole viewport  the scroll position is restored automatically  but as  JordanNelson correctly pointed out  if the page is shorter you need to keep track of the original y scroll position and restored it explicitly when you go back to the page  The updated version of the code covers this case too  by always explicitly restoring the scroll position   import   Component  OnInit   from   angular core   import   Router  NavigationStart  NavigationEnd   from   angular router   import   Location  PopStateEvent   from  quot  angular common quot     Component       selector   my-app       template    lt ng-content gt  lt  ng-content gt       export class MyAppComponent implements OnInit        private lastPoppedUrl  string      private yScrollStack  number              constructor private router  Router  private location  Location           ngOnInit             this location subscribe  ev PopStateEvent    gt                this lastPoppedUrl   ev url                      this router events subscribe  ev any    gt                if  ev instanceof NavigationStart                    if  ev url    this lastPoppedUrl                      this yScrollStack push window scrollY                 else if  ev instanceof NavigationEnd                    if  ev url    this lastPoppedUrl                        this lastPoppedUrl   undefined                      window scrollTo 0  this yScrollStack pop                       else                     window scrollTo 0  0

User · Answer

You can also use scrollOffset in Route ts  Ref  Router ExtraOptions  NgModule     imports        SomeModule forRoot        SomeRouting                  scrollPositionRestoration   enabled           scrollOffset  0 0               exports   RouterModule

User · Answer

Here s a solution that I ve come up with  I paired up the LocationStrategy with the Router events  Using the LocationStrategy to set a boolean to know when a user s currently traversing through the browser history  This way  I don t have to store a bunch of URL and y-scroll data  which doesn t work well anyway  since each data is replaced based on URL   This also solves the edge case when a user decides to hold the back or forward button on a browser and goes back or forward multiple pages rather than just one   P S  I ve only tested on the latest version of IE  Chrome  FireFox  Safari  and Opera  as of this post    Hope this helps   export class AppComponent implements OnInit     isPopState   false     constructor private router  Router  private locStrat  LocationStrategy         ngOnInit    void       this locStrat onPopState      gt          this isPopState   true               this router events subscribe event   gt             Scroll to top if accessing a page  not via browser history stack       if  event instanceof NavigationEnd  amp  amp   this isPopState            window scrollTo 0  0           this isPopState   false                    Ensures that isPopState is reset       if  event instanceof NavigationEnd            this isPopState   false

User · Answer

for iphone ios safari you can wrap with a setTimeout  setTimeout function        window scrollTo 0  1      0

User · Answer

You can write this more succinctly by taking advantage of the observable filter method   this router events filter event   gt  event instanceof NavigationEnd  subscribe      gt          this window scrollTo 0  0         If you re having issues scrolling to the top when using the Angular Material 2 sidenav this will help   The window or document body won t have the scrollbar so you need to get the sidenav content container and scroll that element  otherwise try scrolling the window as a default   this router events filter event   gt  event instanceof NavigationEnd     subscribe      gt          const contentContainer   document querySelector   mat-sidenav-content      this window        contentContainer scrollTo 0  0         Also  the Angular CDK v6 x has a scrolling package now that might help with handling scrolling

User · Answer

Angular lately introduced a new feature  inside angular routing module make changes like below   NgModule     imports   RouterModule forRoot routes       scrollPositionRestoration   top

User · Answer

If you need simply scroll page to top  you can do this  not the best solution  but fast   document getElementById  elementId   scrollTop   0

User · Answer

window scroll top Both window pageYOffset and document documentElement scrollTop returns the same result in all the cases  window pageYOffset is not supported below IE 9   app component ts  import   Component  HostListener  ElementRef   from   angular core     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent      isShow  boolean    topPosToStartShowing   100      HostListener  window scroll     checkScroll          const scrollPosition   window pageYOffset    document documentElement scrollTop    document body scrollTop    0       console log   scroll    scrollPosition        if  scrollPosition  gt   this topPosToStartShowing          this isShow   true        else         this isShow   false               gotoTop         window scroll          top  0         left  10         behavior   smooth                   app component html   lt style gt    p     font-family  Lato     button     position  fixed    bottom  5px    right  5px    font-size  20px    text-align  center    border-radius  5px    outline  none       lt  style gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt   lt p gt    Lorem ipsum dolor sit  amet consectetur adipisicing elit  Minus  repudiandae quia  Veniam amet fuga  eveniet velit ipsa repudiandae nemo  Sit dolorem itaque laudantium dignissimos  rerum maiores nihil ad voluptates nostrum   lt  p gt    lt button  ngIf  isShow   click   gotoTop    gt  lt  button gt

User · Answer

In addition to the perfect answer provided by  Guilherme Meireles as shown below  you could tweak your implementation by adding smooth scroll as shown below   import   Component  OnInit   from   angular core       import   Router  NavigationEnd   from   angular router         Component           selector   my-app           template    lt ng-content gt  lt  ng-content gt               export class MyAppComponent implements OnInit           constructor private router  Router               ngOnInit                 this router events subscribe  evt    gt                    if    evt instanceof NavigationEnd                         return                                    window scrollTo 0  0                                    then add the snippet below   html         scroll-behavior  smooth          to your styles css

User · Answer

If you are loading different components with the same route then you can use ViewportScroller to achieve the same thing   import   ViewportScroller   from   angular common    constructor private viewportScroller  ViewportScroller      this viewportScroller scrollToPosition  0  0

User · Answer

just do it easy with click action  in your main component html make reference  scrollContainer   lt div class  main-container   scrollContainer gt       lt router-outlet  activate   onActivate  event  scrollContainer   gt  lt  router-outlet gt   lt  div gt    in main component  ts  onActivate e  scrollContainer        scrollContainer scrollTop   0

User · Answer

window scrollTo   doesn t work for me in Angular 5  so I have used document body scrollTop like   this router events subscribe  evt    gt       if  evt instanceof NavigationEnd          document body scrollTop   0

User · Answer

You can register a route change listener on your main component and scroll to top on route changes   import   Component  OnInit   from   angular core   import   Router  NavigationEnd   from   angular router     Component       selector   my-app       template    lt ng-content gt  lt  ng-content gt       export class MyAppComponent implements OnInit       constructor private router  Router           ngOnInit             this router events subscribe  evt    gt                if    evt instanceof NavigationEnd                     return                            window scrollTo 0  0

User · Answer

This solution is based on  FernandoEcheverria s and  GuilhermeMeireles s solution  but it is more concise and works with the popstate mechanisms that the Angular Router provides  This allows for storing and restoring the scroll level of multiple consecutive navigations   We store the scroll positions for each navigation state in a map scrollLevels  Once there is a popstate event  the ID of the state that is about to be restored is supplied by the Angular Router  event restoredState navigationId  This is then used to get the last scroll level of that state from scrollLevels   If there is no stored scroll level for the route  it will scroll to the top as you would expect   import   Component  OnInit   from   angular core   import   Router  NavigationStart  NavigationEnd   from   angular router     Component       selector   my-app       template    lt ng-content gt  lt  ng-content gt       export class AppComponent implements OnInit      constructor private router  Router         ngOnInit         const scrollLevels     navigationId  number   number             let lastId   0      let restoredId  number       this router events subscribe  event  Event    gt           if  event instanceof NavigationStart            scrollLevels lastId    window scrollY          lastId   event id          restoredId   event restoredState   event restoredState navigationId   undefined                 if  event instanceof NavigationEnd            if  restoredId                 Optional  Wrap a timeout around the next line to wait for              the component to finish loading           window scrollTo 0  scrollLevels restoredId     0             else             window scrollTo 0  0

User · Answer

For everyone who is looking for a solution and read up to this post  The imports      RouterModule forRoot routes        scrollPositionRestoration   enabled                 doesn t answer the question of the topic  If we look into Angular source code then we could read there interesting lines   So this stuff will only work on back navigation  One of the solutions could be something like  constructor router  Router         router events          pipe filter  e   e is NavigationEnd   gt  e instanceof NavigationEnd            subscribe      gt                this document querySelector   top   scrollIntoView                   This will look on each navigation to the div with that id and scroll to it  Another way of doing that is to use the same logic but with help of decorator or directive which will allow you to select where and when to scroll top

User · Answer

As of Angular 6 1  the router provides a configuration option called scrollPositionRestoration  this is designed to cater for this scenario   imports      RouterModule forRoot routes        scrollPositionRestoration   enabled

User · Answer

If you have server side rendering  you should be careful not to run the code using windows on the server  where that variable doesn t exist  It would result in code breaking   export class AppComponent implements OnInit     routerSubscription  Subscription     constructor private router  Router                 Inject PLATFORM ID  private platformId  any        ngOnInit         if  isPlatformBrowser this platformId           this routerSubscription   this router events          filter event   gt  event instanceof NavigationEnd           subscribe event   gt              window scrollTo 0  0                            ngOnDestroy         this routerSubscription unsubscribe            isPlatformBrowser is a function used to check if the current platform where the app is rendered is a browser or not  We give it the injected platformId   It it also possible to check for existence of variable windows  to be safe  like this   if  typeof window     undefined

User · Answer

You can add the AfterViewInit lifecycle hook to your component   ngAfterViewInit        window scrollTo 0  0

User · Answer

This worked for me best for all navigation changes including hash navigation   constructor private route  ActivatedRoute      ngOnInit       this  sub   this route fragment subscribe  hash  string    gt        if  hash          const cmp   document getElementById hash         if  cmp            cmp scrollIntoView                  else         window scrollTo 0  0

User · Answer

Fernando Echeverria great  but this code not work in hash router or lazy router  because they do not trigger location changes   can try this    x000D   x000D  private lastRouteUrl  string        x000D     x000D   x000D  ngOnInit    void   x000D    this router events subscribe  ev    gt    x000D      const len   this lastRouteUrl length x000D      if  ev instanceof NavigationEnd    x000D        this lastRouteUrl push ev url  x000D        if  len  gt  1  amp  amp  ev url     this lastRouteUrl len - 2     x000D          return x000D          x000D        window scrollTo 0  0  x000D        x000D       x000D    x000D   x000D   x000D

User · Answer

From Angular 6 1  you can now avoid the hassle and pass extraOptions to your RouterModule forRoot   as a second parameter and can specify scrollPositionRestoration  enabled to tell Angular to scroll to top whenever the route changes   By default you will find this in app-routing module ts   const routes  Routes             path            component                      NgModule     imports        RouterModule forRoot routes          scrollPositionRestoration   enabled      Add options right here               exports   RouterModule     export class AppRoutingModule       Angular Official Docs

User · Answer

The main idea behind this code is to keep all visited urls along with respective scrollY data in an array  Every time a user abandons a page  NavigationStart  this array is updated  Every time a user enters a new page  NavigationEnd   we decide to restore Y position or don t depending on how do we get to this page  If a refernce on some page was used we scroll to 0   If browser back forward features were used we scroll to Y saved in our array  Sorry for my English     import   Component  OnInit  OnDestroy   from   angular core   import   Location  PopStateEvent   from   angular common   import   Router  Route  RouterLink  NavigationStart  NavigationEnd       RouterEvent   from   angular router   import   Subscription   from  rxjs Subscription     Component     selector   my-root     templateUrl     app component html     styleUrls      app component css      export class AppComponent implements OnInit  OnDestroy      private  subscription  Subscription    private  scrollHistory    url  string  y  number             private  useHistory   false     constructor      private  router  Router      private  location  Location           public ngOnInit          this  subscription   this  router events subscribe  event  any    gt               if  event instanceof NavigationStart            const currentUrl    this  location path                       this  location path                  const item   this  scrollHistory find x   gt  x url     currentUrl           if  item              item y   window scrollY            else             this  scrollHistory push   url  currentUrl  y  window scrollY                       return                if  event instanceof NavigationEnd            if  this  useHistory              this  useHistory   false            window scrollTo 0  this  scrollHistory find x   gt  x url                event url  y             else             window scrollTo 0  0                                  this  subscription add this  location subscribe  event  PopStateEvent           gt    this  useHistory   true                  public ngOnDestroy    void       this  subscription unsubscribe

User · Answer

The best answer resides in the Angular GitHub discussion  Changing route doesn t scroll to top in the new page       Maybe you want go to top only in root router changes  not in children    because you can load routes with lazy load in f e  a tabset    app component html   lt router-outlet  deactivate   onDeactivate    gt  lt  router-outlet gt    app component ts  onDeactivate       document body scrollTop   0       Alternatively  you can scroll to top by using this other call       window scrollTo 0  0      Full credits to JoniJnm  original post

User · Answer

Using the Router itself will cause issues which you cannot completely overcome to maintain consistent browser experience  In my opinion the best method is to just use a custom directive and let this reset the scroll on click  The good thing about this  is that if you are on the same url as that you click on  the page will scroll back to the top as well  This is consistent with normal websites  The basic directive could look something like this   import  Directive  HostListener  from   angular core     Directive       selector    linkToTop      export class LinkToTopDirective         HostListener  click       onClick    void           window scrollTo 0  0             With the following usage    lt a routerLink     linkToTop gt  lt  a gt    This will be enough for most use-cases  but I can imagine a few issues which may  arise from this    Doesn t work on universal because of the usage of window Small speed impact on change detection  because it is triggered by every click No way to disable this directive   It is actually quite easy to overcome these issues    Directive     selector    linkToTop      export class LinkToTopDirective implements OnInit  OnDestroy       Input     set linkToTop active  string   boolean        this active   typeof active      string    active length     0   active         private active  boolean   true     private onClick  EventListener    event  MouseEvent    gt        if  this active          window scrollTo 0  0                 constructor  Inject PLATFORM ID  private readonly platformId  Object                private readonly elementRef  ElementRef                private readonly ngZone  NgZone           ngOnDestroy    void       if  isPlatformBrowser this platformId           this elementRef nativeElement removeEventListener  click   this onClick  false                ngOnInit    void       if  isPlatformBrowser this platformId           this ngZone runOutsideAngular      gt           this elementRef nativeElement addEventListener  click   this onClick  false                         This takes most use-cases into account  with the same usage as the basic one  with the advantage of enable disabling it    lt a routerLink     linkToTop gt  lt  a gt   lt  -- always active -- gt   lt a routerLink      linkToTop   isActive  gt   lt  -- active when  isActive  is true -- gt    commercials  don t read if you don t want to be advertised  Another improvement could be made to check whether or not the browser supports passive events  This will complicate the code a bit more  and is a bit obscure if you want to implement all these in your custom directives templates  That s why I wrote a little library which you can use to address these problems  To have the same functionality as above  and with the added passive event  you can change your directive to this  if you use the ng-event-options library  The logic is inside the click pnb listener    Directive       selector    linkToTop      export class LinkToTopDirective         Input       set linkToTop active  string boolean            this active   typeof active      string    active length     0   active             private active  boolean   true        HostListener  click pnb       onClick    void         if  this active            window scrollTo 0  0

[angular] Angular 2 Scroll to top on Route Change

layout.component.pug

layout.component.ts

Examples related to angular

Examples related to typescript

Examples related to angular2-routing

Examples related to angular2-template

Examples related to angular2-directives