Angular Scroll to Top of Div Element Example

By Hardik Savani | November 21, 2020 | Category : Angular


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 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 - 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...



Tags : Angular


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: