Angular4 - Scrolling to anchor

Question

I am trying to do a simple scroll to an anchor element on the same page. Basically, the person clicks on a "Try It" button and it scrolls to an area lower on the page with the id "login". Right now, it is working with a basic id="login" & <a href="#login"></a> but it is jumping to that section. Ideally, I would like it to scroll there. If I am using Angular4, is there some built in way to do this or what is the easiest way? Thanks!

Whole template... (component still empty)

<div id="image-header">     <div id="intro">         <h1 class="text-center">Welcome to ThinkPlan</h1>         <h3 class="text-center">Planning your way</h3>         <a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll -->     </div> </div> <div class="container" id="info">     <div class="row">         <div class="col-md-12">              <div class="space" id="login"></div> <!-- The place to scroll to -->                 <h1 class="text-center">ThinkPlan</h1>                 <form  class="form-horizontal">                     <fieldset>                         <legend>Login</legend>                         <div class="form-group">                             <label for="inputEmail" class="col-lg-2 control-label">Email</label>                             <div class="col-lg-10">                                 <input type="text" class="form-control" id="inputEmail" placeholder="Email">                             </div>                         </div>                         <div class="form-group">                             <label for="inputPassword" class="col-lg-2 control-label">Password</label>                             <div class="col-lg-10">                                 <input type="password" class="form-control" id="inputPassword" placeholder="Password">                              </div>                         </div>                         <div class="form-group" id="log-btn">                             <div class="col-lg-10 col-lg-offset-2">                                 <button routerLink="/plan" type="submit" class="btn btn-outline-primary">Login</button>                             </div>                         </div>                         <p class="lead text-center">New here? <a routerLink="signup">Sign up.</a></p>                     </fieldset>                 </form>         </div>     </div> </div> 

Answer 1

For Angular 6+ you can use:

1. In your routing module:

    imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})] 

2. Then in your component html

    <a (click)="onClick('AnchorId')">Click me!</a>  <a (click)="onClick('OtherAnchorId')">Click me, too!</a>  ...  <div id="AnchorId">...</div>  ...  <div id="OtherAnchorId">...</div> 

3. Then in your component ts

   import { ViewportScroller } from '@angular/common';  @Component({     selector: 'component-selector',     templateUrl: './mycomponent.component.html' }) export class MyComponent {   constructor(private viewportScroller: ViewportScroller) {}    public onClick(elementId: string): void {        this.viewportScroller.scrollToAnchor(elementId);   } } 

Answer 2

I think it's more simple solution :

In your HTML :

<a [routerLink]="['/']" fragment="login"></a> 

In your typescript :

ngOnInit() {  this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); }  ngAfterViewChecked(): void {   try {       if(this.fragment) {           document.querySelector('#' + this.fragment).scrollIntoView();       }   } catch (e) { } }