How to Scroll to an Element on click in Angular ? (original) (raw)

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 `

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 `

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