Angular Scroll to Top of Element Example

November 22, 2020 | Category : Other

Hi All,This post will give you example of angular scroll to top of div. if you want to see example of angular scroll to element then you are a right place. This tutorial will give you simple example of angular scroll to element in div. this example will help you scroll to top of div angular. follow bellow step for 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 and angular 11 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 - HDTuto.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...