title: How to smooth scroll to page anchor in angular 4 without plugins properly?
body: <p>What I want to achieve is a click to  and do a smooth scroll to bottom / specified div area which i define with hashtag just like  i think it should be like this. </p>
  
  <p>here is the live example in the w3school example which is written for JQuery: <a href="https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll" rel="noreferrer">https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll</a></p>
  
  <p>What I do is peek from this answer: <a href="https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor">Angular2 Routing with Hashtag to page anchor</a></p>
  
  <p>but i don't really understand the answer, the answer is looked like this :</p>
  
  <p>this part is HTML part :</p>
  
  <pre><code>&lt;a [routerLink]="['somepath']" fragment="Test"&gt;Jump to 'Test' anchor &lt;/a&gt;
  </code></pre>
  
  <p>and below this, the router.navigate is where should I put the code? component.ts right? but how do i access this function? should i implement (click)?</p>
  
  <pre><code>this._router.navigate( ['/somepath', id ], {fragment: 'test'});
  </code></pre>
  
  <p>and below this, i get it, which it should write in my component.ts :</p>
  
  <pre><code>** Add Below code to your component to scroll**
  
    import {ActivatedRoute} from '@angular/router'; // &lt;-- do not forget to import
  
    private fragment: string;
  
    constructor(private route: ActivatedRoute { }
  
    ngOnInit() {
      this.route.fragment.subscribe(fragment =&gt; { this.fragment = fragment; });
    }
  
    ngAfterViewInit(): void {
      try {
        document.querySelector('#' + this.fragment).scrollIntoView();
      } catch (e) { }
    }
  </code></pre>
  
  <p>what is the "somepath" mean? I should add a route in my routes.ts right? usually, i add a new path in here for example like this :</p>
  
  <pre><code>export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'product', redirectTo: '/product' },
    ...homeRoutes,
    ...productRoutes
  ];
  </code></pre>
  
  <p>can anyone provide me with full example code in HTML, routes, and component?</p>