Prevent page jump on Router.Navigate

Question

On click of the following link the current page jumps to the top before navigating to the other page.

<a href="javascript:void(0);" (click)="goToTicket(x.refNo, $event)">{{x.ticketTitle}}</a>

component.ts

  goToTicket(refNo, e) {

    e.preventDefault();
    this.router.navigate(['/ticket/ticket-details'], { queryParams: { id: refNo } });
  }

How do I prevent the page jump here?

Answer 1

You should remove this code

href="javascript:void(0);" 

or use

<a [routerLink]="['/ticket/ticket-details']" [queryParams]="{ id: x.refNo }">{{x.ticketTitle}}</a>

Answer 2

You can use scrollPositionRestoration

you just need to disable this in the router configuration like this

RouterModule.forRoot(routes, {scrollPositionRestoration: 'disabled'})

Stackblitz example