How to redirect (jump) on different section in single Page in Angular

Question

When using tab on a page and click to jump on that page section in Angular.

  scrollToElement($element): void {
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

On Anchor Link use (click)="scrollToElement(publishedResearchSection)" instead of href.

use #publishedResearchSection on target div

Answer 1

One way to achieve what you want is to make use of fragments in Angular.

So in your code where you call the navigate to method e.g.:

this.router.navigate(['/results'], { fragment: 'publishedResearchSection' });

add the fragment property pointing to the required id.

And then in your HTML file for that component, add an id to the element you want to scroll to:

<div #publishedResearchSection></div>

Have a look at Url creations with fragments for more info.