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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example