How to Scroll to a Particular Element in Angular?

When we have a lot of content on a single page of an application or a website, it becomes difficult for the end user to find a particular section on that page.

In such cases, it is often useful to provide a mechanism to scroll to a particular element on the page, so that the user can easily access the content they are looking for.

In this article, I’ll show you how you can scroll to a particular element in Angular. So, without further ado let’s get started.

The simplest way to scroll to a particular element in Angular is to use the scrollIntoView() method of the Element interface. This method also gives us several options to control the scroll behavior such as smooth or instant scroll.

Let’s try to implement it in our application.

For demonstration purpose, We have created an Angular application which has a component named home. Inside the home.component.html, we have a button. We will use this button to scroll to our target div element.

Now, follow the below steps:

Step 1: Give a reference to the target element

The first thing you need to do is, give a reference to the target element. In Angular, a reference is a way to access DOM elements from your template.

To give a reference to an element in Angular, you can use a # symbol followed by the name of the reference for eg. #targetDiv.

<!-- Give a reference to the target element -->
<div #targetDiv>This is the target div element.</div>

Step 2: Pass the target’s reference to the click event handler

The second thing you need to do is, add a click event handler to that element on which click you want to scroll to the target element and then pass the target element’s reference to the click event handler function as an argument.

<!-- Pass target's reference to click event handler -->
<button (click)="scrollToDiv(targetDiv)">Scroll to Div</button>

Step 3: Call the scrollIntoView() method inside the click event handler

The last thing you need to do is, call the scrollIntoView() method on the target element inside the click event handler function.

// Click event handler function
scrollToDiv(target:HTMLElement){
  
  // Scroll to the target element smoothly
  target.scrollIntoView();

}

Here is the complete example:

home.component.html:

<div >
    <!-- Pass target's reference to click event handler -->
    <button (click)="scrollToDiv(targetDiv)">Scroll to Div</button>

    <div>This is a some div element.</div>
    <p>This is some random paragraph....</p>

    <!-- Give a reference to the target element -->
    <div #targetDiv>This is the target div element.</div>

    <div>This is another normal div element.</div>
</div>  

home.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor() { }

  ngOnInit(): void { }

  // Click event handler function
  scrollToDiv(target:HTMLElement){
    
    // Scroll to the target element smoothly
    target.scrollIntoView();

  }

}

Here is the outcome of the above implementation:

As you can see from the above gif, as soon as we are clicking the button, it is scrolling us to the target div element smoothly.

Controlling the Scroll Behavior

The scrollIntoView() method gives us several options to control the scroll behavior. These options can be passed to the scrollIntoView() method as an object.

For example:

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

Here are the details of these parameters:

• behavior: Defines the behavior of the scroll i.e. smooth or instant. It can be smooth or auto. The default value is auto.
• block: It defines the vertical alignment of the scroll. It can be start, center, end or nearest. The default value is start.
• inline: It defines the horizontal alignment of the scroll. It can also be one of the start, center, end or nearest. The default value is nearest.

You can read more about the scrollIntoView() method in detail on Mozilla Documentation.

Conclusion

In this article, we learned how we can scroll to a particular element in Angular.

In summary, if you want to scroll to a particular element in Angular, you can use the scrollIntoView() method of the Element interface.

You have to simply call this method on the target element i.e. the element to which you want to scroll. The scrollIntoView() method also gives you some optional parameters which you can use to control the scroll behavior.

Thanks for reading.