Angular Scroll to Top of Div Element Example

Hi All,

I am going to show you example of angular scroll to top of div. this example will help you angular scroll to element. if you want to see example of angular scroll to element in div then you are a right place. we will help you to give example of scroll to top of div angular. Here, Creating a basic example of scroll to top inside div angular.

you can easily make scroll to top of div element in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

Here, i will give you very simple example of scroll to top in angular. we will take on div with container class. i will add height, width and overflow-y css property. then i will simply add 100 items there and so you can scroll that div easily. bellow that div i will add one button call "Scroll to Top", when you click on it, it will scroll to top.

Let's see that example and bellow preview:

Preview:

src/app/app.component.ts

import { Component, VERSION } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  
  itemList : number[]=[];
  
  constructor(){
    for(var i=0; i<100; i++){
      this.itemList.push(+i)
    }
  }
  
  scrollToTop(el) {
    el.scrollTop = 0;
  }
}

src/app/app.component.html

<h1>Angular Scroll to Top of Div Example - ItSolutionStuff.com</h1>
   
<div #container class="container">
	<ul>
		<li *ngFor="let i of itemList">{{i}}</li>
	</ul>
</div>
   
<button (click)="container.scrollTop = 0">Scroll to Top</button>

src/app/app.component.css

.container{
  margin-bottom: 8px;
  width: 400px;
  background-color: #a1a1a1;
  height: 400px;
  overflow-y: scroll;
}

Now you can run and check it.

I hope it can help you...