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" > w3wiki </ 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" > w3wiki </ 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