How to Scroll to an Element on click in Angular ?
Last Updated :
01 Aug, 2024
Improve
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 appnameStep 2: After creating your project folder i.e. appname, move to it using the following command.
cd appnameProject 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.
<!-- 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>
// 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"))
}
}
// 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.
<!-- 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>
// 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"))
}
}
// 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
