How to Scroll to an Element on click in Angular ?
Last Updated :
01 Aug, 2024
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>
// 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.
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>
// 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
Similar Reads
How to Create Todo List in Angular 7 ? The ToDo app is used to help us to remember some important task. We just add the task and when accomplished, delete them. This to-do list uses various Bootstrap classes that make our web application not only attractive but also responsive. Approach: Create a new angular app using following command:
2 min read
Build a Simple Web App with Express & Angular Building a simple web app using Express and Angular is a great way to understand the fundamentals of full-stack development. Express, a minimalist web framework for Node.js, handles the backend, while Angular, a powerful front-end framework, provides the structure for the client-side application.In
5 min read
How to build progressive web app(PWA) in Angular 9 ? In this article, we will develop a PWA (Progressive Web App) using Angular. What is PWA ? Progressive Web Apps (PWAs) are web applications that have been designed so that they are capable, reliable, and installable. PWA are built and enhanced with modern APIs to deliver enhanced capabilities, reliab
7 min read
Routing in Angular 9/10 Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. Approach: Create an Angular app that to be used.Create the navigation links inside
3 min read
How to create a To-Do list using Drag and Drop in Angular 7 ? We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command- ng g c To-Do Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do com
2 min read
How to make a multi-select dropdown using Angular 11/10 ? In this article, we will learn to build the multiple selection drop-down menu in Angular. To accomplish this task, we require Angular 10 or the Angular 11 version. Sometimes we need to display dynamically fetched multi-selected data in a drop-down menu, for this, we will use the npm @ng-select/ng-se
3 min read
How to set focus on input field automatically on page load in AngularJS ? We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator wit
3 min read
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 ApplicationStep 1: Crea
4 min read
AngularJS $locationProvider The $locationProvider facilitates the configuration of the application by implementing the deep linking paths that are stored. Here are some of the things that can be made with the $locationProvider service: Set the html5Mode property to true to enable HTML5 mode, which uses the history.pushState AP
4 min read
AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read