Angular2 How to navigate to certain section of the page identified with an id attribute

Question

How to navigate to certain section of the page identified with an id attribute?

Example:

I need to navigate to \"structure\" paragraph on my page

Answer 1

I have used a combination of the previous answer once a click is performed in the HTML file:

<ul>
   <li><a (click)="internalRoute("routeexample1","info")">Info</a></li>
   <li><a (click)="internalRoute("routeexample2","structure")>Structure</a></li>
   <li><a (click)="internalRoute("routeexample3","something")>Something Else</a </li>
</ul>

In the component typescript file (component file) it is necessary to define the corresponding navigation including Router and navigation:

constructor(private router:Router) { }
internalRoute(page,dst){
    this.sectionScroll=dst;
    this.router.navigate([page], {fragment: dst});
}

With this, the app is able to navigate to the corresponding page but not to the specific section. To go to the defined (desirable) section, it is needed to do the scroll. For that, we initially define a function to do the scroll to specific "id" (Scroll Function here):

doScroll() {

    if (!this.sectionScroll) {
      return;
    }
    try {
      var elements = document.getElementById(this.sectionScroll);

      elements.scrollIntoView();
    }
    finally{
      this.sectionScroll = null;
    }
  } 

Finally, we need to capture the navigation event and perform the scroll (modifying the ngInit function) (Event capturing page Init):

ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      this.doScroll();
      this.sectionScroll= null;
    });
  }

It works for me. Hopes help.

Answer 2

Angular 2: I would prefer to go with scrollIntoView() method scrollIntoView. It would provide smooth scrolling transition effect in the browser.

HTML Code

<div #info id="info">
        <h3>Info</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div #structure  id="structure">
        <h3>Structure</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  <li>
  <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
    <li><a routerLink="policies" class="collapsible-header">Policies</a>
      <div class="collapsible-body">
         <ul>
           <li (click)="infoStruc()"><a >Info</a></li>
           <li (click)="moveToStructure()"><a  >Structure</a></li>
           <li><a >Something Else</a></li>
         </ul>
      </div>
    </li>
   </ul>
 </li>

and in the Component.

  @Component({
    selector: 'my-app',
    template: `template.html        `
})
export class AppComponent {
    @ViewChild('structure') public structure:ElementRef;
    @ViewChild('info') public info:ElementRef;

    public moveToStructure():void {
            this.structure.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
    }
    public infoStruc():void {
        setImmediate(() => {
            this.info.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
        });
    }
}

Answer 3

You could add fragment attribute for your html link

<ul>
   <li><a [routerLink]="['routeexample1']" fragment="info">Info</a></li>
   <li><a [routerLink]="['routeexample2']" fragment="structure">Structure</a></li>
   <li><a [routerLink]="['routeexample3']" fragment="something">Something Else</a></li>
 </ul>

To navigate programmatically you could this

this.router.navigate( ['routeexample1' ], {fragment: 'structure'});