How to Scroll to an Element on click in Angular ?

In this article, we will see how to scroll to an element on click in Angular. Here, we will create a component that enables scrolling to specific targets when a button is pressed within the document from one target to another.

Steps for Installing & Configuring the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Project Structure

It will look like the following:

Example 1: In this example, we have multiple cards, we can scroll from one card to another with a button click. We have defined ‘name’ and ‘target’ for each card, and hence passing the same in a function scroll. In the .ts file, we have implemented the scroll function and utilized scrollIntoView.

HTML

<!-- app.component.html -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      rel="stylesheet">
<div class="jumbotron"
     #first name="first">
    <h2 class="display-4 text-success">
          GeeksforGeeks
      </h2>
    <h2 class="display-4">
        Scroll to element on click in Angular
    </h2>
    <hr class="my-4">
    <p>
        Click on the below button
        to starting learning.
    </p>
    <button (click)="scroll(target)"
            class="btn btn-primary">
          Scroll To last
      </button>
</div>

<div class="card"
     #HTML name="HTML">
    <div class="card-header">
        HTML
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Front End Technologies
        </h5>
        <p class="card-text">
            HTML, CSS, Javascript,
            Angular, React.js
        </p>
        <button (click)="scroll(java)"
                class="btn btn-primary">
              Scroll To Java
          </button>
    </div>
</div>
<br>
<div class="card"
     #java name="java">
    <div class="card-header">
        Java
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Back End Technologies
        </h5>
        <p class="card-text">
            Springboot, APIS
        </p>
        <button (click)="scroll(HTML)"
                class="btn btn-primary">
              Scroll To HTML
          </button>
    </div>
</div>
<br>

<div class="card"
     #target name="last">
    <div class="card-header">
        Last
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Backend Technologies
        </h5>
        <p class="card-text">
            Node.js, Django,Express
        </p>
        <button (click)="scroll(first)"
                class="btn btn-primary">
              Scroll To first
          </button>
    </div>
</div>

Javascript

// app.component.ts
import { Component, OnInit }
    from '@angular/core';
import { Router, NavigationEnd }
    from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((event) => {
            if (!(event instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

    scroll(el: HTMLElement) {
        el.scrollIntoView();
        console.log("Scrolling to " + el.getAttribute("name"))
    }
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { RouterModule, Routes }
    from '@angular/router';
import { AppComponent }
    from './app.component';

const routes: Routes = [
    { path: '', component: AppComponent },
];

@NgModule({
    imports: [BrowserModule,
        RouterModule.forRoot(routes)],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we can add a smooth scrolling parameter, by adding {behavior:”smooth”} to scrollIntoView, which will smoothly help the scrolling.

HTML

<!-- app.component.html -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      rel="stylesheet">
<div class="jumbotron"
     #first id="first">
    <h2 class="display-4 text-success">
          GeeksforGeeks
      </h2>
    <h2 class="display-4">
        Scroll to element on click in Angular
    </h2>
    <hr class="my-4">
    <p>
        Click on the below button
        to starting learning.
    </p>
    <button (click)="scroll(target)"
            class="btn btn-primary">
          Scroll To last
      </button>
</div>

<div class="card"
     #HTML id="HTML">
    <div class="card-header">
        HTML
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Front End Technologies
        </h5>
        <p class="card-text">
            HTML, CSS, Javascript,
            Angular, React.js
        </p>
        <button (click)="scroll(java)"
                class="btn btn-primary">
              Scroll To Java
          </button>
    </div>
</div>
<br>
<div class="card"
     #java id="java">
    <div class="card-header">
        Java
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Back End Technologies
        </h5>
        <p class="card-text">
            Springboot, APIS
        </p>
        <button (click)="scroll(HTML)"
                class="btn btn-primary">
              Scroll To HTML
          </button>
    </div>
</div>
<br>

<div class="card"
     #target id="last">
    <div class="card-header">
        Last
    </div>
    <div class="card-body">
        <h5 class="card-title">
            Backend Technologies
        </h5>
        <p class="card-text">
            Node.js, Django,Express
        </p>
        <button (click)="scroll(first)"
                class="btn btn-primary">
              Scroll To first
          </button>
    </div>
</div>

Javascript

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((event) => {
            if (!(event instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

    scroll(el: HTMLElement) {
        el.scrollIntoView({ behavior: "smooth" });
        console.log("Scrolling to " + el.getAttribute("id"))
    }
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { RouterModule, Routes }
    from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
    { path: '', component: AppComponent },
];

@NgModule({
    imports: [BrowserModule,
        RouterModule.forRoot(routes)],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output