Scroll to element on click in Angular 4

javascript

scrolling

angular-4

template-reference-variable

byAlex Kataev·Mar 5, 2025

Look at this Angular magic: ViewChild targets the element, scrollIntoView() makes the scrolling smooth.

import { ViewChild, ElementRef } from '@angular/core';

export class AppComponent {
  @ViewChild('elementRef') element: ElementRef;

  scrollToElement() {
    // Take a smooth ride to the element. Enjoy the journey!
    this.element.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

Dive into your component's HTML, throw the anchor aka #elementRef at our target element, call scrollToElement() on a click event and voila! You're smoothly sailing towards the element.

In Depth: Understanding Scroll in Angular

When you need to navigate through the elements in the visible area of your browser, a scroll action can guide you. In Angular 4, this sailing becomes more Angular-friendly.

Set your target: Template Reference Variable

The first thing you need to find in the vast ocean of code is your destination element. The # symbol in your HTML template is your compass (such as #elementRef)

<div #elementRef>Destination Element</div>
<button (click)="scrollToElement()">Set Sail!</button>

Steer the wheel: ViewChild Decorator

Within the component's realm, guide your vessel using your map, the ViewChild decorator. An absolute must-have for a smooth and safe journey to preserve the maintainability of your Angular application.

Smooth Sailing: ScrollIntoView()

Planning smooth and comfortable journeys? Ensure you pass {behavior: 'smooth'} to the scrollIntoView() function. Keep your passengers satisfied, say no to abrupt trips.

ScrollIntoView() over window.scrollTo(): Why?

scrollIntoView() is your best mate on this journey. Why? It doesn't require any heavy lifting to calculate the element's position in the viewport. Plus, it's more element-specific than window.scrollTo().

Advanced Aspects of Smooth Scrolling

Handling Dynamic Content

When cruising through the dynamic waters of data-driven lists or dynamic content, ensure the safety of your scrolling journey. Make sure your destination is present on your map (DOM) before setting sail. Use observables with async pipe for smooth navigation:

<li *ngFor="#item of items | async" #elementRef>{{ item }}</li>

Debugging the Journey

While setting sail, check your coordinates often by debugging your scroll behavior. Keep your map accurately updated with console log messages:

scrollToElement() {
  // Captain to crew: We are setting sail!
  console.log('Attempting to scroll to element...');
  this.element.nativeElement.scrollIntoView({ behavior: 'smooth' });
  // Captain to crew: Let's hope we made it! 🌴
  console.log('Should have scrolled!');
}

Even though we are navigating the Angular 4 waters, keep an eye on the horizon. Future versions like Angular 7 might introduce new challenges. Keep your code ready to adapt.

Online Testing Tools

There's an island of tools like StackBlitz or Plunker that can help you verify your ship's blueprint. Check for any leaks or weak points that might cause troubles in different waters.

explain-codes / Javascript / Scroll to element on click in Angular 4

Linked

Changing route doesn't scroll to the top in the new page



How to scroll to an element inside a div?



How do I scroll to an element using JavaScript?



How to get on scroll events?



Programmatically navigate using React router

